CSS @media kuralları

Tanım ve kullanım

@media kuralları, medya sorgularında farklı medya türleri/cihazlar için farklı stiller uygulamak için kullanılı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 (telefon veya tablet geniş ekran modunda mı yoksa dikey ekran modunda mı?)
  • Çözünürlük

Medya sorguları, masaüstü bilgisayarlar, dizüstü bilgisayarlar, tabletler ve telefonlara özelleştirilmiş stil şablonları sağlamak için popüler bir tekniktir (duyarlı web tasarımı).

Sizin medya sorguları kullanarak belirli stillerin yalnızca yazdırılan belgeler veya ekran okuyuculara (mediatype: print, screen veya speech) uygulanmasını belirleyebilirsiniz.

Medya türleri dışında, medya özellikleri de vardır. Medya özellikleri, kullanıcı aracısı veya görüntü cihazının belirli özelliklerini test ederek, medya sorgularına daha fazla belirli ayrıntı sağlar. Örneğin, belirli bir genişliğin üzerinde veya altında tarayıcıya stil uygulayabilirsiniz.

Daha fazla bilgi için bkz.:

CSS Eğitimi:CSS medya sorgusu

CSS Eğitimi:CSS Medya Sorgusu Örneği

RWD Eğitimi:Medya sorguları ile yanıt verici Web tasarımı gerçekleştirme

JavaScript Kılavuzu:window.matchMedia() metodu

Örnek

Örnek 1

Eğer tarayıcı penceresinin genişliği 600px veya daha azsa, <body> öğesinin arka plan rengini 'açık mavi'ye değiştirin:

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

Kişisel olarak deneyin

Daha fazla TIY örneği, sayfanın altında bulunabilir.

CSS Grammar

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

not, only ve and anahtar kelimelerinin anlamı:

not: not anahtar kelimesi tüm medya sorgusunun anlamını tersine çevirir.

only: only anahtar kelimesi eski tarayıcıların belirtilen stilleri uygulamalarını önler, bu tarayıcılar medya özellikli medya sorgularını desteklemez. Modern tarayıcılara etkisi yoktur.

and: and anahtar kelimesi medya özelliklerini medya türü veya diğer medya özellikleri ile birleştirir.

Bunlar tümü de seçmeli. Ancak, not veya only kullanılırsa, medya türü de belirtilmelidir.

Farklı medya için farklı stiller kullanabilirsiniz, örneğin:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Medya türü

Değer Açıklama
all Varsayılan. 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 Sayfayı okumak için kullanılan ekran okuyucuları.

Medya özellikleri

Değer Açıklama
any-hover

Herhangi bir kullanılabilir girdi mekanizması kullanıcıya (fare vb.) öğelere oturmayı izin verir mi?

Media Queries Level 4'te eklendi.
any-pointer

Kullanılabilir girdi mekanizmalarında herhangi bir işaret cihazı var mı, varsa, hassasiyeti nasıl?

Media Queries Level 4'te eklendi.
aspect-ratio Görüntüleme alanı (viewport) genişlik ve yükseklik oranları.
color

Çıktı cihazının her pikselin bit değeri, yaygın olarak 8, 16, 32 bit olabilir.

Cihaz renk çıkışını desteklemezse bu değer 0 olur.
color-gamut

Kullanıcı aracısı ve çıktı cihazının yaklaşık olarak desteklediği renk alanı.

Media Queries Level 4'te eklendi.
color-index

Çıktı cihazının renk sorgulama tablosundaki (color lookup table) girdi sayısı.

Cihaz renk sorgulama tablosunu kullanmazsa bu değer 0 olur.
device-aspect-ratio

Çıktı cihazının genişlik ve yükseklik oranları.

Media Queries Level 4'te kullanılmaktadır.
device-height

Çıktı cihazının render yüzeyinin (örneğin ekran) yüksekliği.

Media Queries Level 4'te kullanılmaktadır.
device-width

Çıktı cihazının render yüzeyinin (örneğin ekran) genişliği.

Media Queries Level 4'te kullanılmaktadır.
display-mode

Uygulamanın görüntüleme modu, web uygulamanın manifestindeki display üyesi tarafından belirlenir.

Web App Manifest spec tanımlanmıştır.
forced-colors

Kullanıcı aracısı paletteyi sınırlar mı?

Media Queries Level 5'te eklendi.
grid Çıktı cihazı grid ekranı mı yoksa nokta dizi ekranı mı kullanır?
height Görüntüleme alanı (viewport) yüksekliği.
hover

Ana giriş mekanizması, kullanıcıların elementlerin üzerine farenin konumunu tutmasına izin verir mi?

Media Queries Level 4'te eklendi.
inverted-colors

Tarayıcı veya alt seviye işletim sisteminin renklerini tersine çevirip çevirmediği.

Media Queries Level 5'te eklendi.
light-level

Mevcut aydınlatma düzeyi.

Media Queries Level 5'te eklendi.
max-aspect-ratio Görüntüleme alanının genişliği ve yüksekliği arasındaki en büyük oran.
max-color Çıktı cihazının her renk bileşeninin en büyük bit sayısı.
max-color-index Cihazın gösterebileceği en büyük renk sayısı.
max-height Görüntüleme alanının en büyük yüksekliği, örneğin tarayıcı penceresi.
max-monochrome Tek renkli (gri ton) cihazlarda her 'renk' için en büyük bit sayısı.
max-resolution Cihazın en büyük çözünürlüğü, dpi veya dpcm ile ölçülür.
max-width Görüntüleme alanının en büyük genişliği, örneğin tarayıcı penceresi.
min-aspect-ratio Görüntüleme alanının genişliği ve yüksekliği arasındaki en küçük oran.
min-color Çıktı cihazının her renk bileşeninin en küçük bit sayısı.
min-color-index Cihazın gösterebileceği en küçük renk sayısı.
min-height Görüntüleme alanının en küçük yüksekliği, örneğin tarayıcı penceresi.
min-monochrome Tek renkli (gri ton) cihazlarda her 'renk' için en küçük bit sayısı.
min-resolution Cihazın en düşük çözünürlüğü, dpi veya dpcm kullanılarak belirlenir.
min-width Görüntüleme alanının en küçük genişliği, örneğin tarayıcı penceresi.
monochrome

Çıktı cihazının tek renkli çerçeve buffer'ında her pikselin bit derinliği.

Cihaz siyah-beyaz ekran değilse, bu değer 0 olur.
orientation Pencere (viewport) döndürme yöntemi (yatay veya dikey mod).
overflow-block

Çıktı cihazı, blok eksen boyunca ekran genişliği (viewport) boyunca çıkan içerikle nasıl başa çıkar?

Media Queries Level 4'te eklendi.
overflow-inline

İç çizgili eksen boyunca ekran genişliği (viewport) boyunca çıkan içerik kaydırılabilir mi?

Media Queries Level 4'te eklendi.
pointer

Ana giriş mekanizması bir işaretçi cihazı mı? Eğer öyleyse, doğruluk düzeyi nasıl?

Media Queries Level 4'te eklendi.
prefers-color-scheme

Kullanıcı parlatıcı mı yoksa koyu mı renk paleti seçmeyi tercih eder?

Media Queries Level 5'te eklendi.
prefers-contrast

Kullanıcı, yakın renkler arasındaki kontrastı artırmak veya azaltmak için sistemden talepte bulunur mu?

Media Queries Level 5'te eklendi.
prefers-reduced-motion

Kullanıcı sayfasında daha az dinamik etki görmek ister mi?

Media Queries Level 5'te eklendi.
prefers-reduced-transparency

Kullanıcı daha düşük şeffaflık seçmeyi tercih eder mi?

Media Queries Level 5'te eklendi.
resolution Çıktı cihazının çözünürlüğü, dpi veya dpcm kullanılarak belirlenir.
scan Çıktı cihazının tarayım süreci (televizyon gibi cihazlar için uygundur).
scripting

JavaScript gibi betiklerin kullanılabilir olup olmadığını tespit et.

Media Queries Level 5'te eklendi.
update

Çıktı cihazının içerik renderleme sonuçlarını güncelleme sıklığı.

Media Queries Level 4'te eklendi.
width Pencere (viewport) genişliği.

Daha fazla örnek

örnek 2

Tarayıcının genişliği 600px veya daha küçükse, elementi gizleyin:

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

Kişisel olarak deneyin

örnek 3

Eğer ekran genişliği 800 piksel veya daha genişse, arka plan rengini maviya ayarlamak için medya sorgusu kullanın; eğer ekran genişliği 400 ile 799 piksel arasında ise, arka plan rengini yeşil ayarlamak için medya sorgusu kullanın. Eğer ekran genişliği 400 pikselden küçükse, arka plan rengi hafif mavi olacaktır:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: hafif yeşil;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavanda;
  }
}

Kişisel olarak deneyin

örnek 4

Bir yanıt verici navigasyon menüsü oluşturun (büyük ekranlarda yatay, küçük ekranlarda dikey olarak görüntülenir):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Kişisel olarak deneyin

Örnek 5

Medya sorgularını kullanarak yanıt verici sütun düzeni oluşturun:

/* 992px veya daha küçük ekranlarda, dört sütundan iki sütuna dönüşün */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Genişliği 600 piksel veya daha az olan ekranlarda, sütunları yığınla değil, yan yana durdurun */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Kişisel olarak deneyin

Örnek 6

Medya sorgularını kullanarak yanıt verici bir web sitesi oluşturun:

Kişisel olarak deneyin

Örnek 7

Medya sorguları, sayfanın döndürülme yöntemine göre sayfa düzenini değiştirmek için de kullanılabilir. Tarayıcı penceresinin genişliği yüksekliğiden büyük olduğunda (yani 'geniş ekran' yöntemi) yalnızca geçerli olan bir grup CSS özelliği yazabilirsiniz.

Eğer yön geniş ekran modunda ise, hafif mavi arka renk kullanın:

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

Kişisel olarak deneyin

Örnek 8

Metin rengini, belgeyi ekran上显示时为绿色，打印时为黑色，使用媒体查询设置：

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

Kişisel olarak deneyin

Örnek 9

Virgülle ayrılmış liste: Mevcut medya sorgusuna bir diğer medya sorgusu eklemek için virgül kullanın (OR işleci gibi davranır):

/* 600px ile 900px arasında veya 1100px'dan büyük genişlikte - <div> görünümünü değiştir */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Kişisel olarak deneyin

Tarayıcı desteği

Tablo içindeki rakamlar, @media kurallarının tamamen desteklenen ilk tarayıcı sürümünü belirtmektedir.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9