@media

Podsumowanie

@media określa typ docelowych mediów (oddzielonych przecinkami) dla zestawu reguł (ograniczonych klamrami).

Składnia

@media <typy mediów> {
  /* reguły specyficzne dla medium */
}

Typy mediów

all
Pasujące dla wszystkich urządzeń.
braille
Przeznaczone dla dotykowych urządzeń brailla.
embossed
Przeznaczone dla drukarek brailla.
handheld
Przeznaczone dla urządzeń kieszonkowych (przeważnie z małym ekranem, ograniczoną przepustowością).
print
Przeznaczone dla materiałów stronnicowanych lub dokumentów pokazywanych na ekranie w trybie podglądu wydruku. Sprawdź rozdział o mediach stronnicowanych, aby dowiedzieć się o zagadnieniach formatowania, które są specyficzne dla mediów stronnicowanych.
projection
Przeznaczone dla rzutowanych prezentacji, np. projektorów. Sprawdź rozdział o mediach stronnicowanych, aby dowiedzieć się o zagadnieniach formatowania, które są specyficzne dla mediów stronnicowanych.
screen
Przeznaczone przede wszystkim dla kolorowych ekranów komputerowych.
speech
Przeznaczone dla syntezatorów mowy. Uwaga: CSS2 miał do tego celu podobny typ mediów nazywany 'aural' . Zobacz w dodatku szczegóły o arkuszach stylów 'aural'.
tty
Przeznaczone dla mediów używających dla znaków siatki o stałej podziałce (jak np. dalekopis, terminal lub urządzenia przenośne o ograniczonych możliwościach wyświetlania). Autorzy nie powinni używać dla medium "tty" jednostek w pikselach.
tv
Przeznaczone dla urządzeń telewizyjnych (niska rozdzielczość, kolor, ograniczone przewijanie ekranów, dźwięk dostępny).


Grupy mediów

Typy mediów są również częścią różnych grup mediów. Poniższa tabel pokazuje, które typy są w których grupach.

  Grupy
Typ continuous paged visual audio speech tactile grid bitmap interactive static
braille X         X X   X X
embossed   X       X X     X
handheld X X X X X   X X X X
print   X X         X   X
projection   X X         X X  
screen X   X X       X X X
speech X       X       X X
tty X   X       X   X X
tv X X X X       X X X

Przykłady

  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

Uwagi

Wielomodalny typ medium jest wciąż jednym typem medium. Np. typ medium 'tv' jest wielomodalnym typem, który prezentuje jednocześnie wizualnie i słuchowo dla jednego obrazu.

Specyfikacje

Zgodność z przeglądarką

Zobacz także

@import, @font-face

Autorzy i etykiety dokumentu

 Autorzy tej strony: teoli, Ptak82, Mgjbot, Witia
 Ostatnia aktualizacja: teoli,