@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

CSS 2.1

Zgodność z przeglądarką

Zobacz także

@import, @font-face