CSS Medya Sorguları

CSS2'de eklenen medya türleri

CSS2'ye eklenen @media Kural, farklı medya türleri için farklı stil kuralı tanımlamanıza olanak tanır.

Örneğin: Bilgisayar ekranı için stiller kuralı, yazıcı için bir grup, el cihazı için bir grup, hatta televizyon için bir grup bile olabilir, vb.

Maalesef, yazıcı medya türleri dışında, bu medya türleri cihazlar tarafından geniş ölçüde desteklenmemiştir.

CSS3 medya sorgularını tanıttı

CSS3'teki medya sorguları, CSS2 medya türlerinin kavramını genişletir: Onlar cihaz türlerini değil, cihazın yeteneklerine odaklanır.

Medya sorguları, birçok şeyi kontrol etmek için kullanılabilir, örneğin:

  • Görüntü alanının genişliği ve yüksekliği
  • Cihazın genişliği ve yüksekliği
  • Yön (tablet veya telefon yatay mı yoksa dikey mi?)
  • Çözünürlük

Medya sorguları, masaüstü, dizüstü bilgisayar, tablet ve telefonlar (örneğin iPhone ve Android telefonları) gibi cihazlara özelleştirilmiş stil tabloları sağlama popüler bir tekniktir.

Tarayıcı desteği

Tablodaki rakamlar, tamamen desteklenen @media Kuralın ilk tarayıcı sürümü.

Özellik
@media 21.0 9.0 3.5 4.0 9.0

Medya sorgusu grameri

Medya sorgusu, bir medya türünden oluşur ve bir veya daha fazla ifade içerebilir, bu ifadeler doğru veya yanlış olarak çözümlenebilir.

@media not|only mediatype and (expressions) {
  CSS-Code;
}

Belirtilen medya türü, gösterilen belgenin cihaz türü ile eşleşiyorsa ve medya sorgusundaki tüm ifadeler doğruysa, sorgu sonucu doğru olur. Medya sorgusu doğru olduğunda, ilgili stil tablosu veya stil kuralı uygulanır ve normal zincir kurallarına uyulur.

Not veya only işlevsellik operatörlerini kullanmadığınız sürece, medya türü zorunlu değildir ve öntanımlıdır: all Tür

Farklı medyalar için farklı stil tabloları kullanabilirsiniz:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 Medya Türleri

Değer Açıklama
all Tüm medya türü cihazları için kullanılır.
print Yazıcılar için kullanılır.
screen Bilgisayar ekranı, tablet, akıllı telefonlar vb. için kullanılır.
speech Sayfanın yüksek sesle

Medya sorgusunun basit bir örneği

Medya sorgusunu kullanmanın bir yolu, stil tablosunda bir yedek CSS bölümü bulmaktır.

Aşağıdaki örnek, görüntü alanının genişliği 480 piksel veya daha geniş olduğunda arka plan rengini açık yeşile değiştirir (görüntü alanı 480 pikselden küçükse, arka plan rengi pembe olur):

örnek

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Kişisel olarak deneyin

A menü, eğer görüntü alanının genişliği 480 piksel veya daha genişse, sayfanın soluna kayar (görüntü alanı 480 pikselden küçükse, menü içeriklerin üstüne yerleştirilir):

örnek

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

Kişisel olarak deneyin

Daha Fazla Medya Sorgusu Örneği

Daha fazla medya sorgusu örneği için bir sonraki sayfayı ziyaret edin:CSS MQ Örneği.

CSS @media Referans Kılavuzu

Tüm medya türleri ve özellikleri/expressionların tam bir özeti için bizim CSS Referansındaki @media Kuralları.