28/11/2021

CSS Media Query & Responsive Tasarım

Media Queries

Web üzerinde trafik yoğunluğunun %90’ı mobilden geliyor. Bu yüzden tasarlanan web sitelerinin mobil kullanıma uygun bir şekilde responsive tasarıma sahip olması gerekiyor, bu konuda CSS media query yapısı büyük rol oynuyor.

Büyük ekranlardaki içeriği küçük ekranda uygun olarak göstermek için veya farklı ekran boyutlarında sayfa içeriğini taşma, kayma yapmaması için medya sorgu yapısı kullanılıyor. Web siteleri kodlanırken farklı mobil ekran ölçülerine göre responsive CSS kodları ile optimize hale getiriliyor.

Media query ile spesifik ekran genişliklerinde HTML elemanlarına CSS kodları uygulanabiliyor.

Örnek olarak bir sayfa içerisinde <p> etiketleri 17 piksel iken, 600 piksel altındaki ekranlarda oranı korumak için <p> etiketinin font büyüklüğü 14 piksel olarak belirlenebiliyor.

Min-width Media Query

Min-width kullanıldığında medya sorgusunun altına yazılan CSS kodları belirtilmiş olan piksel değerinin üzeri için geçerli olur.

Aşağıdaki örnekte olduğu gibi en fazla 751 piksele kadar p etiketinin font büyüklüğü 17 piksel olarak belirtilmiştir.

@media (min-width: 751px) { 
   p {
     font-size: 17px;
   }
}

Max-width Media Query

Max-width kullanıldığında, medya sorgusunun altına yazılan CSS kodları belirtilmiş olan piksel değerinin altı için geçerli olur.

Aşağıdaki örnekte olduğu gibi en fazla 750 piksele kadar p etiketinin font büyüklüğü 14 piksel olarak belirtilmiştir.

@media (max-width: 750px) { 
   p {
     font-size: 14px;
   }
}

Orientation: Landscape

Orientation: landscape kullanımında medya sorgusunun altına yazılan CSS kodları mobil cihazlar yatay konuma getirildiğinde geçerli olur. 

Aşağıdaki örnekte mobil cihaz yatay konuma geldiğinde kutunun rengini değiştirecek CSS kodu belirtilmiştir.

Media Query Orientation Landscape

Dikey Konum

Media Query Orientation Landscape

Yatay Konum

div {
    height: 100px;
    width: 100px;
    background-color: bisque;
}
@media (orientation: landscape) {
    div {
        background-color: brown;
    }
}

Orientation: Portrait

Orientation: portrait kullanımında medya sorgusunun altına yazılan CSS kodları mobil cihazlar dikey konumda iken geçerli olur. 

Media Query Orientation Portrait

Dikey Konum

Media Query Orientation Portrait

Yatay Konum

h1 {
   font-weight: 100;
}

@media (orientation: portrait) {
   h1 { 
      font-weight: bold; 
   } 
}

Eski Tarayıcılarla Uyumluluk

Medya sorgusunda kullanılan only kavramı eski tarayıcılarda geçerliliği olmayan medya sorgularının uygulanmasını engeller. Yeni tarayıcılarda herhangi bir etki oluşturmaz.

@media only screen and (max-width: 750px) {...}

Media Query & Viewport İlişkisi

Media query yapısının çalışabilmesi için sayfanın kaynak koduna <head></head> etiketinin içerisine viewport meta etiketinin eklenmesi gerekiyor.

<meta name="viewport" content="width=device-width, initial-scale=1">

Kaynakça:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries