@media

przez 4 współtwórców

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ą

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.2 1.3
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 9.0 9.0 3.1

Zobacz także

@import, @font-face

Autorzy i etykiety dokumentu

Contributors to this page: teoli, Ptak82, Mgjbot, Witia
Ostatnia aktualizacja: teoli,
Ukryj panel boczny