Responsive Web Tasarım CSS Medya Sorguları

@media sorgusu ile farklı medya türleri için farklı stiller tanımlayabilirsiniz.

@media, farklı ekran boyutları için farklı stiller ayarlayabilir, özellikle de tasarım duyarlı bir sayfa oluşturmanız gerekiyorsa, @media çok kullanışlıdır.

Tarayıcı boyutunu sıfırladığınızda, sayfa tarayıcı genişliğine ve yüksekliğine göre sayfayı yeniden oluşturur.

Medya sorgusu, CSS3'te tanıtılan bir CSS tekniğidir.

@media Kural, CSS özelliklerinin bir bloğunu yalnızca belirli bir koşul doğruysa kod bloğunu Çalıştırır.

ÖRNEK:

Tarayıcı penceresi 600 piksel veya daha küçükse, arka plan rengi açık Gri renkte olacaktır:

 
    @media only screen and (max-width: 600px) {
    body {
          background-color: lightgray;
         }
    }

 

Bir Kesme noktası Ekle

Kesme noktaları, sitenizin içeriğinin, kullanıcı kullanmak için mümkün olan en iyi düzeni sağlamak için yanıt vereceği noktadır.

Duyarlı bir kesme noktası, ne kadar alan tasarlamanız gerektiğine karar verir. Örneğin, 320 piksel genişliğinde bir kesme noktası yalnızca 320 piksel genişliğinde bir alan içinde tasarlamanıza izin verir. IPhone telefonlar için bu oran her şeyi tasarlarken mükemmel. 1024px kesme noktası, yalnızca iPad tabletler için daha uygun olan 1024 piksel genişliğinde bir alan tasarlamanıza olanak tanır.

Büyük ölçüde Kesme noktaları

• Mobil Telefonlar (320 piksel, 480 piksel, 600 piksel)
• Tabletler (768px)
• Standart web siteleri (960px, 1024px)
• Geniş web siteleri (1280px)

Responsive Web Tasarım Grid Sistemi makalesinde grid sistemi bölümünde, satır ve sütun içeren bir web sayfası oluşturduk fakat tarayıcıyı küçülttüğümüzde yada küçük bir ekranda iyi görünmüyordu.

Medya sorguları bu sorunu çözmemize yardımcı olabilir. Tasarım taslağının ortasına kesme noktaları ekleyebiliriz ve farklı kesme noktaları farklı etkilere sahiptir.

768px'te bir kesme noktası eklemek için medya sorgusu kullanın:

ÖRNEK:

Tarayıcı penceresi 768 pikselden daha küçük olduğunda, her sütun % 100 genişliğe sahip olacaktır:

@media only screen and (max-width: 768px) {

    /* Telefondaki görüntü */

    [class*="col-"] {
        width: 100%;
     }
  }

Tarayıcı penceresini küçülttüğümüzde veya ekran boyutu küçük cihazlarda web sayfasına baktığımızda sayfa daha iyi görünecektir.

Önceliği Mobil cihazlara vermek

Mobil cihazlarına öncelik, Bilgisayarlar ve diğer cihazlarda Web tasarımda mobil cihazlara öncelik vermek anlamına gelir. Duyarlı veya uyarlamalı bir tasarım oluşturmak için en iyi stratejilerden biridir.

Mobil cihazlar için öncelikli tasarlama önemlidir çünkü; Sayfa daha küçük ekranlı cihazlarda daha hızlı görüntülenecektir.

En küçük görüntü alanı için tasarım yapıldıktan sonra, içerik hiyerarşisine göre tasarımınızdaki önemli içeriği veya özellikleri göz önünde bulundurarak daha geniş görüntü alanlarına kadar ölçeklendirdiğimizde gerekli öğeleri ekleyin ve en geniş ekran düzenine uygun şekilde yerleştirildiğinden emin olun.

Ekran boyutu küçük cihazlara öncelik vermek için CSS kodlarımızda bazı değişiklikler yapmamız gerekiyor.

768 pikselden daha küçük ekranlarda stil değişiklikleri yapıyoruz ve ayrıca ekran genişliği 768 pikselden daha büyük olduğunda stili değiştirmemiz gerekiyor.

/* Mobil tasarım */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* Bilgisayar tasarım */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

Bir başka kesme noktası

İstediğiniz kadar çok kesme noktası ekleyebilirsiniz.

Ayrıca tabletler ve mobil cihazlar için kesme noktaları belirleyebiliriz.

Bu örnekte, başka bir medya sorgusu ekliyoruz 620px'den büyük ve 768 px'den küçük bir ekran için yeni sınıflar tanımlarız:

/* Mobil cihaz */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 620px) {
    /* Tablet Ekranlar */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* Bilgisayar */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

Aynı sınıflardan iki takım var bu bize garip gelebilir, ama bize HTML fazladan sınıf isimleri belirtmekle kolaylık verir, her kesme noktasında sütunları hangi konumda olacağına hakkında karar verecektir.

ÖRNEK:

<div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>

Yukardaki örneği tarayıcı genişliğini küçülterek veya büyüterek denediğimizde Bize sütunların bulunduğu konumları gösterir. class="row" yukardaki örnekte bir satır belirlendi.

Ekran genişliği 768px ve üzerinde sayfa bölümleri 3 adet div elemanı olduğu için 3 sütun olarak bölünecek, col-3= %25, col-6= %50, col-3= %25 bu rakamsal ifadelerden görüldüğü üzere 3 sütun %25, %50, %25 olarak bölünecek.

Ekran genişliği 600px ve 768px arasında sayfa bölümleri 3 adet div elemanı olduğu için 3 sütun olarak bölünecek, col-m-3= %25, col-m-9= %75 olarak 2 sütun yanyana gelir col-m-12= %100 son sütun %100 olduğu için alt bölmede yer alır.

Ekran genişliği 600px ve altında olan için yukarda css bölümünde mobil tanıtılan bölümde width=100% olarak değer verildiği için her bir sütun sayfa genişliğinde olacaktır.

Orientation(Oryantasyon-yön):Yatay / Dikey

Medya sorguları, tarayıcının yönüne bağlı olarak bir sayfanın düzenini değiştirmek için de kullanılabilir.

CSS medya sorguları ile birleştirildiğinde, farklı cihazların oryantasyonuna (yatay manzara, dikey portre vb.) Uyum sağlayan düzenler oluşturabilirsiniz.

Söz dizimi:

portrait : potre görünüm, mobil cihaz dikey konumunda.

landscape :manzara görünüm, mobil cihaz yatay konumunda.

ÖRNEK: Yön yatay moddaysa, web sayfası açık mavi renkli bir arka plan olarak ayarlayın.

@media only screen and (orientation: landscape) {
    body {
         background-color: lightblue;
       }
   }

Medya Sorguları ile Öğeleri Gizle

Medya sorgularının başka bir yaygın kullanımı, farklı ekran boyutlarındaki öğeleri gizlemek:

@media only screen and (max-width: 600px) {
  div.example {
       display: none;
     }
  }

Medya Sorguları ile Gizli Öğeleri Görünür Yap

@media only screen and (max-width: 600px) {
  div.example {
      display: block;
    }
  }

Medya Sorgusuyla Yazı Tipi Boyutunu Değiştirin

Bir öğenin yazı tipi boyutunu farklı ekran boyutlarında değiştirmek için medya sorgularını da kullanabilirsiniz:

/* Ekran boyutu 700px veya daha fazlaysa, yazı tipi boyutunu 
50px olarak ayarlayın. */

@media only screen and (min-width: 700px) {
  div.test {
    font-size: 50px;
  }
}

/* Ekran boyutu 700 piksel veya daha azsa, yazı tipi boyutunu 
24 piksele ayarlayın. */

@media only screen and (max-width: 700px) {
  div.test {
    font-size: 30px;
  }
}

Responsive Web Tasarım Derslerine buradan ulaşabilirsiniz…