Gelişen teknoloji ile birlikte akıllı telefon ve tablet gibi cihazların yaygınlaşması, web sitelerinin düzenli olarak farklı çözünürlüklerde görünmesini gerekli kıldığını söyleyebiliriz. Css3 ile hayatımıza giren medya kodları bu zorunluluğun sorun olmamasını sağlıyor ve bize daha kolay bir yöntem sunuyor.
Tarayıcının yüksekliğine ve genişliğine bağlı olarak sitemizin hareketi veya siteyi ziyaret eden kullanıcının kullandığı cihaza uyum sağlaması hem tasarım hem de SEO açısından oldukça önemlidir. Mini bir örnek verecek olursak;
Sitemizde yer alan bir tablonun medya kodları olmaksızın değişen yükseklik ve genişlik değerlerinde dağıtıldığını, metinlerin veya görsellerin iç içe geçtiğini görebilirsiniz. Ancak bu dağılım medya kodları ile engellenebilir. Masamızı farklı yükseklik ve genişliklerde şekillendirebilir hatta görünümünü tamamen kaldırabiliriz.
@media only screen and (min-width : 992px;) {
.örnekclass {
Background : yellow ;
}
}
@media only screen and (max-width : 992px;) {
.örnekclass {
Background : blue ;
}
}
Yukarıdaki örnekte, “sampleclass” adlı nesnemiz için, masaüstü görünümü için “min-width” ifadesini kullanarak arka planı sarı olarak ayarladık. Mobil görünüm için, “max-width” ifadesini kullanarak arka planı mavi olarak ayarladık.
Css3 ile birlikte gelen medya kodları sayesinde farklı çözünürlüklere müdahale etmek çok kolay hale geldi.
