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ı

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.

css media

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.

css media

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.

css responsive

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.

css responsive

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.

css responsive

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:

orientation:portrait | landscape

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…

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

7664

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.