Gelişen teknolojiyle beraber akıllı telefon, tablet gibi cihazların yaygınlaşması, web sitelerinin farklı çözünürlüklerde de düzenli görünmesini zorunlu hale getirdi diyebiliriz. Css3 ile beraber hayatımıza giren media kodları bu zorunluluğun bir sorun olamamasını sağlıyor ve bizlere daha kolay bir yöntem sunuyor.
Tarayıcının yükseklik ve genişlik değerlerine bağlı olarak ya da siteyi ziyaret eden kullanıcının kullandığı cihaza göre uyum sağlayarak sitemizin hareket etmesi, gerek tasarım açısından gerekse seo açısından oldukça önemlidir. Mini bir örnek verecek olursak ;
Sitemiz içerisinde yer alan bir tablonun, media kodları olmadan değişen yükseklik ve genişlik değerlerinde dağıldığını, yazıların veya görsellerin iç içe girdiğini görebilirsiniz. Ancak media kodları ile bu dağılmanın önüne geçebilir. Farklı yükseklik ve genişliklerde tablomuzu şekillendirebilir, hatta tamamen görünümünü kaldırabiliriz.
@media only screen and (min-width : 992px;) {
.örnekclass {
Background : yellow ;
}
}
@media only screen and (max-width : 992px;) {
.örnekclass {
Background : blue ;
}
}
Yukarda ki örnekte “örnekclass” isimli bir nesnemiz için masaüstü görünümü için “min-width” ifadesini kullanarak arka planına sarı olarak belirledik. Mobil görünümü için ise “max-width” ifadesini kullanarak arka planını mavi olarak belirledik.
İşte Css3 ile birlikte gelen media kodları sayesinde farklı çözünürlüklere müdahale edebilmek işte bu denli kolaylaştı.
