CSS 3 standart cihazlar için medya sorguları

Artık bir sayfa kodlarken sadece bilgisayar kullanıcılarını değil hatta bilgisayar ve telefon kullanıcılarını da değil birçok mobil cihaz kullanıcılarını düşünmek zorunda kalıyoruz. Haliyle CSS kodlarımıza çok dikkat etmemiz gerekiyor.

Bunun için en çok tercih ettiğimiz kodlardan biri de “media query” yani medya sorgularıdır.
Bu paylaşımımda temel olara en çok tercih edilen hatta standart haline gelmiş cihazlar için kullanılabilecek medya sorguları paylaşıyorum.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Bu etiketleri kullanma mantığını da kısaca şöyle anlatabiliriz. Örneğin bir tasarım yapacaksınız ve tasarımın farklı cihazlarda farklı boyutlarda gözükmesini istiyorsunuz. O zaman paylaştığım medya sorgularında her cihaz için farklı özellikler gireceksiniz. Özellikleri her medya sorgusu içerisinde /*Styles*/ yazan yerlere girmeniz gerekiyor.

Örnek verecek olursak diyelim container adlı bir sınıfımız olsun ve bu sınıfın bilgisayarlarda %100 genişliğinde ama ipadlerde %80 genişliğinde olmasını istiyorsunuz. O zaman kodumuz şu şekilde olacaktır:

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.container {width:80%;}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
.container {width:100%;}
}

Bu konu ile ilgili detaylı bilgi için Fatih Hayrioğlunun CSS 3 medya sorguları makalesini inceleyebilirsiniz.

kaynak: css-tricks