Css Media Kullanımı

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.

CSS MEDİA SÖZ DİZİMİ

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.

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 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,

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

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.

Leave a Reply