@media :

Bu yöntem cihazlar için farklı stil kurallarını tanımlamak için kullanılır.

Not: Her cihazın media boyutları ve özellikleri farklıdır.

Örnek

.media {
  background: red;
  width: 300px;
  height: 300px;
  color: white;
}
@media screen and (min-width: 500px) {
    .media {
        background-color: green;
    }
}

Codepen Ön izleme

 

Medya Türleri

Değer	Açıklama
all	Bütün medya türleri için kullanılır.
aural	Onaylanmamaktadır. Synthesizers konuşma ve ses için kullanılır.
braille	Onaylanmamaktadır. Braille dokunsal cihazlar için kullanılır.
embossed	Onaylanmamaktadır. Braille yazıcılar için kullanılır.
handheld	Onaylanmamaktadır. Küçük yada avuç içi cihazlar için kullanılır.
print	Yazıcılar için kullanılır.
projection	Onaylanmamaktadır. Slaytlar için öngörülen sunumlar için kullanılır.
screen	Bilgisayar ekranları, tabletler, cep telefonları gibi cihazlar için kullanılır.
speech	Ekran okuyucular için yüksek sesle sayfayı okur.
tty
tv	Televizyon tipi cihazlar için kullanılır.

Medya Özellikleri

Değer	Açıklama
Aspect-ratio	Genişlik ve görüntüleme alanının yüksekliği arasındaki oranı belirler.
color	Çıkış cihazı için renk bileşeni başına bit sayısını belirtir.
Color-index	Renk sayısını belirler.
embossed	Onaylanmamaktadır. Braille yazıcılar için kullanılır.
Device-aspect-ratio	Cihazın genişlik ve yüksekliği arasındaki oranını belirtir.
Device-height	Cihazın yüksekliğini belirtir.
Device-width	Cihazın genişliğini belirtir.
grid	Aygıtın bir kılavuz cihazı olup olmadığını belirler.
height	Tarayıcı penceresi olarak ekranın yüksekliğini belirtir.
max-aspect-ratio	Genişlik ve görüntüleme alanının yüksekliği arasındaki maksimum oranı belirler.
Max-color	Çıkış cihazı için maximum renk bileşeni başına bit sayısını belirtir.
Max-Color-index	Maximum renk sayısını belirler.
Max-device-aspect-ratio	Cihazın maximum genişlik ve yüksekliği arasındaki oranını belirtir.
Max-device-height	Cihazın maximum yüksekliğini belirtir.
Max-device-width	Cihazın maximum genişliğini belirtir.
Max-height	Tarayıcı penceresi olarak ekranın maximum yüksekliğini belirtir.
Max-monochrome	Bir tek renkli ( gri tonlama ) cihaz üzerinde ” renk ” başına maximum bit sayısını belirtir.
Max-resolution	Dpi veya DPCM kullanılarak , cihaz için maksimum çözünürlük belirler.
max-width	Tarayıcı penceresinin maximum genişliğini belirtir.
Max-aspect-ratio	Minumum genişlik ve görüntüleme alanının yüksekliği arasındaki oranı belirler.
Min-color	Çıkış cihazı için minimum renk bileşeni başına bit sayısını belirtir.
min-color-index	minimum renk sayısını belirler.
min-device-aspect-ratio	Cihazın minimum genişlik ve yüksekliği arasındaki oranını belirtir.
min-device-width	Cihazın minimum genişliğini belirtir.
min-device-height	Cihazın minimum yüksekliğini belirtir.
min-height	Tarayıcı penceresi olarak ekranın minimum yüksekliğini belirtir.
min-monochrome	Bir tek renkli ( gri tonlama ) cihaz üzerinde ” renk ” başına minimum bit sayısını belirtir.
min-resolution	Dpi veya DPCM kullanılarak , cihaz için minimum çözünürlük belirler.
min-width	Tarayıcı penceresinin minimum genişliğini belirtir.
monochrome	Bir tek renkli ( gri tonlama ) cihaz üzerinde ” renk ” başına bit sayısını belirtir.
orientation	Ekranın manzara modunda veya portre modunda olup olmadığını belirtir.
resolution	Dpi veya DPCM kullanılarak , cihaz için çözünürlük belirler
scan	Çıkış aygının tarama süreci belirtir.
width	Tarayıcı penceresinin genişliğini belirtir.

Tarayıcı Desteği

21.0	3.5	9.0	4.0	9