Media Query ve CSS Puanlama

Artık günümüz teknolojisinde yaygın olarak kullanılan mobil cihazlar (Akıllı telefonlar, Tabletler vb.) internet erişimi sağlamsıyla birlikte kullanıcıların siteyi daha rahat dolaşabilmeleri için farklı ekran çözünürlüklerinde web sayfalarının, farklı görüntüleme modellerinin oluşması ihtiyacını doğurdu. Ülkemizde ve Dünyada en çok kullanılan arama motoru olan Google geçtiğimiz ay tüm iltişim kanallarından responsive (mobil duyarlılık ) özelliğini üst sıralara çıkma kriteri olarak baz alacağını duyurdu. Yani responsive design artık olmazsa olmazlar arasında yer aldı. Peki oluşturulan web sitelerini mobil duyarlı hale nasıl getireceğiz? Html yapımızda oluşturmuş olduğumuz iskeleti farklı erkan modlarında CSS Media Query özelliği ile istediğimiz şekle ve formata sokma imkanımız mevcut. CSS sitil dosyasına ekleyeceğimiz @media yapısı ile belirtmiş olduğumuz genişlik aralıklarında Html yapımızda oluşturmuş olduğumuz taglere farklı davranış biçimleri atayabilir ve istemiş olduğumuz responsive görünümü elde edebiliriz. İşinizi dahada kolaylaştırmak adına oluşturulmuş bir çok front-end frameowrkü mevcut (Foundation,Bootstrap vb) bizim tavsiyemiz en yaygın olarak kullanılan Twitter Bootstrap'tır. İçerisinde hazır olarak gelen responsive grid yapısıyla daha hızlı mobil uyumlu websiteleri oluşturabilirsiniz. Şimdi resposnive yapı için @media özelliğinin nasıl kullanıldığını örneklerle inceleyelim.

.renk{
    color: red;
}

@media (max-width: 767px)
{
   .renk{
       color: blue;
       }
}

@media (min-width: 768px)
{
    .renk{
        color:green;
    }

}

@media (min-width: 992px)
{
    .renk{
        color:purple;
    }

}

@media (min-width: 1200px)
{
    .renk{
        color:black;
    }

}

Mobile First Coding pixel sınırlarını aşağıdaki bilgilere göre düzenleyebilirsiniz.

767 pixel;

• Smartphone Portrait
• Smartphone Landscape
• Tablet Portrait (7")

768 pixel;

• Tablet Portrait (≥7")
• Smartphone Landscape (≤7")

992 pixel;

• Tablet Landscape (10")
• CRT Monitor (Old)

1200 pixel;

• Platform Ekranlar

!important Code

li.deneme{
   background-color:#f00 !important;
}

important tanımı çok tercih edilen bir özellik değildir, nadiren de olsa lazım olur.

Kodunuza important tanımı eklemeniz o kuralı CSS puanlamasında diğer yazdığınız kurallara göre daha öncelikli kılar.