Css Media Kullanımı

Merhaba Arkadaşlar,
Bu makalede 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.

Dikkat : 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.

Söz Dizimi

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.

Medya Türleri

     ► 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.

Mantıksal 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 Kullanılan Medya Özellikleri

     ► 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.

Aşağıda, birçok cihaz için medya sorguları yazarken kullanabileceğimiz değerler bulunuyor. 

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.

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 olarak da sayfaya sağ tıklayıp yazdır dediğimizde, ordaki görüntüsünüde print medya türü ile değiştirebiliyoruz.Burda 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,

Sayfa genişliği 992px’i üzerinde iken tarayıcıdaki görüntü.

css-dersleri-media-kullanimi-1 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.

css-dersleri-media-kullanimi-2

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.

css-dersleri-media-kullanimi-3

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.

css-dersleri-media-kullanimi-4

Sayfaya sağ tıklayıp yazdır dediğimizdeki görüntüsü.

css-dersleri-media-kullanimi-5

Tarayıcı Desteği

ÖzellikChromeIEFirefoxSafariOpera
@media21.09.03.54.09.0

Bu resimde 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.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 37 – Responsive Web Tasarım Nedir?

Sonraki : Css Dersleri 39 – Cursor Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +