Bu yazımızda Css’te medya sorguları ne işe yarar?, nasıl kullanabiliriz? onu öğreneceğiz. Medya sorguları ile yapmış olduğumuz tasarımları responsive hale dönüştürebiliriz.
Yani tasarımı farklı ekran çözünürlüklerine (bilgisayar, tablet, telefon, tv vb..) uyumlu hale getirebiliriz. Sadece çözünürlük değil farklı kriterlere göre de medya sorgularını yazabiliyoruz.
Önemli Medya sorgularını kullanmadan önce ekran çözünürlüğünün (pixel) hesaplanması için sayfanızdaki head etiketleri arasına aşağıdaki kodu yazmayı unutmayın.
|
1 2 3 4 5 |
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> |
CSS MEDİA SÖZ DİZİMİ
|
1 2 3 4 5 |
@media not|only medya-türü and (özellik:değer) { /*Css Kodları Yazılacak*/ } |
Medya sorgularını kullanırken öncelikle @media yazıyoruz. Sonrasında isteğe bağlı olarak not veya only anahtar kelimelerini kullanabiliriz. Sonrasında medya türünü belirtiyoruz.
Örneğin screen dediğimizde bilgisayar, telefon vb.. için kullanılır. Son olarak da özellik ve değerini yazarak koşulları belirtiyoruz.
Örneğin max-width:480px dediğimizde ekran genişliği maximum 480px olana kadar uygulanacak Css kodları yazılabilir. Belirttiğimiz durumlar sağlandığında uygulanacak Css kodlarını da süslü parantezler içerisine yazıyoruz.
MEDİA TÜRLERİ
► all : Tüm cihazlar için kullanılır.
► print : Yazıcılar için kullanılır.
► screen : Bilgisayar, telefon, tablet vb.. için kullanılır.
► speech : Ekran okuyucusu için kullanılır.
MANTIKSAL OPERATÖRLER
► and : İki veya daha fazla özelliği bir birine bağlar. Tüm koşulların sağlandığı durumda Css kodları uygulanır.
► only : Sadece belirtilmiş koşullar sağlandığında Css kodları uygulanır.
► not : Belirtilen koşul doğru değilse Css kodları uygulanır.
► birden fazla sorgu : Birden fazla sorguyu aralarına “,” (virgül) koyarak yazabiliriz.
EN ÇOK KULLANILAN MEDİA ÖZELLİKLERİ
► color
► height
► max-height
► max-width
► min-height
► min-width
► orientation
► width
Bunların birçoğu adından da anlaşıldığı gibi bildiğimiz özellikler. Burda orientation özelliğine biraz değinelim. Bu özellik ile cihazlara, yatay veya dikey durumlarda uygulanacak Css kodlarını yazabiliriz. İki değer alabilir. Bunlar;
► landspace : Genişlik yükseklikten büyük ise uygulanır.
► portrait : Yükseklik genişlikten büyük ise uygulanır.
|
1 2 3 4 5 6 7 8 9 |
@media screen and (orientation: landscape) { /* css kodları yazılacak */ } @media screen and (orientation: portrait) { /* css kodları yazılacak */ } |
Aşağıda, birçok cihaz için medya sorguları yazarken kullanabileceğimiz değerler bulunuyor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
/* 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 */ } /********** iPad 3 **********/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { /* Styles */ } /* iPhone 5 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone 6, 7, 8 ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone 6+, 7+, 8+ ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* iPhone X ----------- */ @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } /* iPhone XS Max, XR ----------- */ @media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } /* Samsung Galaxy S3 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ /* Styles */ } /* Samsung Galaxy S4 ----------- */ @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } /* Samsung Galaxy S5 ----------- */ @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } @media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ /* Styles */ } |
Kaynak : responsivedesign
Gördüğünüz gibi farklı genişlik ve yükseklik değerlerine sahip birçok cihaz bulunuyor. Kodlarımızı yazarken bunların tamamını göz önünde bulundurmak çok zor olur. Bu yüzden işleri biraz daha rahatlatma adına genel olarak şu medya sorgularını kullanabiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {...} /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...} /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {...} /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {...} |
Kaynak : w3schools
Konunun daha iyi anlaşılması için şimdi örneğimize geçelim.
4 adet p etiketi tanımladım. Ekranın genişlik durumuna göre p etiketlerine farklı font-size ve background-color değerleri verdim.
Yani tarayıcı genişliği 992px’in üstünde ise p etiketlerine herhangi bir Css kodu uygulanmadan görüntülenecektir. Sayfa genişliğini daralttıkça p etiketlerine uygulanan Css kodlarıda değişecektir.
Son olarakta sayfaya sağ tıklayıp yazdır dediğimizde, oradaki görüntüsünüde print medya türü ile değiştirebiliyoruz.
Burada anlaşılması adına çok basit bir örnek yapıyoruz. Olayın mantığını anladıktan sonra tasarımınızın tamamını tüm cihazlara uygun hale getirebilirsiniz.
Kodlarımız şu şekilde,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @media screen and (max-width: 992px) { p { font-size: 30px; background-color: blue; } } @media screen and (max-width: 768px) { p { font-size: 23px; background-color: yellow; } } @media screen and (max-width: 480px) { p { font-size: 16px; background-color: red; } } @media print { p { font-size: 50px; color: blue; } } </style> </head> <body> <div> <p>Ekran genişliği, maximum 992px ise yazı boyutunu 30px, arkaplan rengini mavi yap</p> <p>Ekran genişliği, maximum 768px ise yazı boyutunu 23px, arkaplan rengini sarı yap</p> <p>Ekran genişliği, maximum 480px ise yazı boyutunu 16px, arkaplan rengini kırmızı yap</p> <p>Sayfayı yazdırırken yazı boyutunu 50px, yazı rengini mavi yap</p> </div> </body> </html> |
Sayfa genişliği 992px’i üzerinde iken tarayıcıdaki görüntü.
Sayfa genişliği 768px ile 992px arasında iken tarayıcıdaki görüntü.
Sayfa genişliğinin 845px olduğunu resmin sağ üst köşesinden görebilirsiniz.
Sayfa genişliği 480px ile 768px arasında iken tarayıcıdaki görüntü.
Sayfa genişliğinin 595px olduğunu resmin sağ üst köşesinden görebilirsiniz.
Sayfa genişliği maximum 480px iken tarayıcıdaki görüntü.
Sayfa genişliğinin 410px olduğunu resmin sağ üst köşesinden görebilirsiniz.
Sayfaya sağ tıklayıp yazdır dediğimizdeki görüntüsü.
TARAYICI DESTEĞİ
| Özellik | Chrome | IE | Firefox | Safari | Opera |
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Bu tabloda tarayıcıların media sorgularını hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.
Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
