CSS3 media sorgulamaları sayesinde her tip ekran çözünürlüğü için tasarımlar oluşturabiliyoruz. Özellikle sayfalarınıza mobil sürüm hazırlarken kullanabileceğiniz media etiketi web tasarımınıda yeni bir devrin başlamasına sebep oldu.
Makalemizin devamında media sorgularını örneklendireceğiz, tanıyacağız ve bu teknik ile hazırlanmış birkaç web sayfası paylaşacağız.
CSS3 Medya Sorguları
Öncelikle sizler için hazırladığımız örneği görüntüleyerek işleme başlayabilirsiniz.
Örnekteki şekil
- 600′den küçük ekran genişliğinde üçgene,
- 600 ile 1200 arası ekran genişliğinde kareye,
- 1200′den büyük ekran genişliğinde daireye
dönüşecektir.
Max Width
Bu alandaki CSS kodları maksimum x ekran çözünürlüğüne göre kullanılır. Aşağıdaki tanımlama 900 pikselden küçük ekran genişliklerinde bütün yazıları kırmızı renge dönüştürür.
@media screen and (max-width: 900px) {
body{color:red;}
}
Eğer bütün bir CSS dosyasına bu tanımlamayı yapmak isterseniz içerisine yazdığımız köprü kodunu aşağıdaki kullanmalısınız.
Min Width
Bu alandaki CSS kodları ise x rakamından büyük ekran çözünürlüklerinde kullanılır. Aşağıdaki tanımlama 900 pikselden büyük ekran genişliklerinde bütün yazıları mevi renge dönüşürür.
@media screen and (min-width: 900px) {
body{color:blue;}
}
Eğer bütün bir CSS dosyasına bu tanımlamayı yapmak isterseniz içerisine yazdığımız köprü kodunu aşağıdaki kullanmalısınız.
Çoklu media sorgulaması
Çoklu media sorgulamalarını aralıklar için tasarım oluştururken kullanıyoruz. Örnek vermek gerekirse :
Aşağıdaki sorgu 900 ile 1200 piksel arasındaki çözünürlüklerde site arka planını yeşil yapacaktır.
@media screen and (min-width: 900px) and (max-width: 1200px) {
body {background: green;}
}
max-device-width ve max-device-height kullanımları
CSS3′ün media sorgulamaları sırasında aklınızda oluşabilecek en büyük soru max-device-width ile max-width arasındaki farkın ne olduğudur. Device kullanımı tahmin edebileceğiniz gibi mobil cihazlara odaklıdır.
- max-width görüntüleyici cihazın kullandığı tarayıcının ekran genişliğidir. Tablet kullanımlarında Chrome ile sitenizi görüntüleyen ziyaretçi, eğer Chrome’un genişliğini daraltırsa bu tanımladan etkilenir.
- max-device-width ise tarayı boyutlandırması değil, tasarımı görüntüleyen cihazın maksimum ekran genişliğine göre hareket eder. Örneğin max-device-width:480 tanımlaması iPhone görüntü tipidir.
Örnek
Sitemizin tasarımı üzerinde hala değişiklikler olmaktadır. Fakat varsayılan haliyle bile CSS3′ün media sorgularına güzel bir örnek teşkil etmektedir.
CSS3 media sorgulamalarını etkili şekilde kullanan Smashing Magazine‘ini unutmamak gerek.
Kaynak : http://www.adobewordpress.com/css3-media
