CSS3 @media

@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