Reguła @media w CSS

Definicja i użycie

Reguła @media w zapytaniach media jest używana do aplikowania różnych stylów dla różnych typów mediów/urządzeń.

Zapytania media mogą być używane do sprawdzania wielu rzeczy, takich jak:

  • Szerokość i wysokość viewport
  • Szerokość i wysokość urządzenia
  • Kierunek (czy telefon lub tablet jest w trybie poziomym lub pionowym?)
  • Rozdzielczość

Użycie zapytań media jest popularną techniką, która pozwala dostarczać dostosowane style do komputerów stacjonarnych, laptopów, tabletów i telefonów komórkowych (reaktywne projektowanie stron internetowych).

Możesz również używać zapytań media, aby określić, które style mają być stosowane tylko dla dokumentów drukowanych lub czytników ekranowych (mediatype: print, screen lub speech).

Oprócz typów mediów istnieją również atrybuty mediów. Atrybuty mediów dostarczają więcej szczegółów dla zapytań mediów, pozwalając na testowanie specyficznych cech użytkownika代理a lub urządzenia wyświetlającego. Na przykład, możesz zastosować style tylko do ekranów większych lub mniejszych niż określona szerokość.

Zobacz również:

Tutorial CSS:Media query w CSS

Tutorial CSS:Przykłady zapytań mediów CSS

Tutorial RWD:Realizacja responsywnego projektowania stron internetowych za pomocą zapytań mediów

Podręcznik JavaScript:Metoda window.matchMedia()

Przykład

Przykład 1

Jeśli szerokość okna przeglądarki wynosi 600px lub mniej, zmień kolor tła elementu <body> na "jasnoniebieski":

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Spróbuj sam

Więcej przykładów TIY można znaleźć na dole strony.

Gramatyka CSS

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

Znaczenie słów kluczowych not, only i and:

not: Słowo kluczowe not odwraca znaczenie całego zapytania mediów.

only: Słowo kluczowe only zapobiega zastosowaniu określonych stylów przez przestarzałe przeglądarki, które nie obsługują zapytań mediów z atrybutami mediów. Nie ma wpływu na nowoczesne przeglądarki.

and: Słowo kluczowe and łączy atrybuty mediów z typem mediów lub innymi atrybutami mediów.

Są one opcjonalne. Jednakże, jeśli używasz not lub only, musisz również określić typ mediów.

Możesz również używać różnych arkuszy stylów dla różnych mediów, tak jak tutaj:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Typ mediów

Wartość Opis
all Domyślnie. Dla wszystkich typów urządzeń mediów.
print Dla drukarek.
screen Dla komputerów ekranowych, tabletów, smartfonów i innych.
speech Ekran czytania ekranowego do czytania strony.

Atrybuty mediów

Wartość Opis
any-hover

Czy istnieje jakiś dostępny mechanizm wejścia, który pozwala użytkownikowi (np. mysz) przyciągać się do elementów?

Dodany w Media Queries Level 4.
any-pointer

Czy wśród dostępnych mechanizmów wejścia znajduje się jakikolwiek urządzenie wskaźnikowe, jeśli tak, jaką ma dokładność?

Dodany w Media Queries Level 4.
aspekt-ratio Stosunek szerokości do wysokości pola widzenia (viewport).
color

Liczba bitów na każdy piksel urządzenia, powszechnie spotykane wartości to 8, 16, 32 bitów.

Jeśli urządzenie nie obsługuje wyjścia kolorowego, wartość ta wynosi 0.
color-gamut

Przybliżony zakres kolorów wspieranych przez agenta użytkownika i urządzenie.

Dodany w Media Queries Level 4.
color-index

Liczba wpisów w tabeli wyszukiwania kolorów (color lookup table) urządzenia.

Jeśli urządzenie nie używa tabeli wyszukiwania kolorów, wartość ta wynosi 0.
device-aspect-ratio

Stosunek szerokości do wysokości urządzenia.

Zostaje przestarzały w Media Queries Level 4.
device-height

Wysokość powierzchni renderowania urządzenia (np. ekranu).

Zostaje przestarzały w Media Queries Level 4.
device-width

Szerokość powierzchni renderowania urządzenia (np. ekranu).

Zostaje przestarzały w Media Queries Level 4.
display-mode

Tryb wyświetlania aplikacji, jak określony przez człon display w manifest web app.

Zdefiniowane w specyfikacji Web App Manifest.
forced-colors

Czy agent użytkownika ogranicza paletę kolorów?

Dodany w Media Queries Level 5.
grid Czy urządzenie używa ekranu siatkowego czy ekranu punktowego?
height Wysokość pola widzenia (viewport).
hover

Czy główny mechanizm wejściowy pozwala użytkownikowi podtrzymać mysz nad elementem?

Dodany w Media Queries Level 4.
inverted-colors

Czy przeglądarka lub system operacyjny podstawowy odwrócił kolory?

Dodany w Media Queries Level 5.
light-level

Aktualny poziom natężenia światła w otoczeniu.

Dodany w Media Queries Level 5.
max-aspect-ratio Maksymalny stosunek szerokości do wysokości obszaru wyświetlania.
max-color Maksymalna liczba bitów dla każdej komponenty koloru na wyjściowym urządzeniu.
max-color-index Maksymalna liczba kolorów, które urządzenie może wyświetlić.
max-height Maksymalna wysokość obszaru wyświetlania, np. okno przeglądarki.
max-monochrome Maksymalna liczba bitów dla każdej „koloru” na monochromatycznym urządzeniu (np. w grayscale).
max-resolution Maksymalna rozdzielczość urządzenia, wyrażona w dpi lub dpcm.
max-width Maksymalna szerokość obszaru wyświetlania, np. okno przeglądarki.
min-aspect-ratio Minimalny stosunek szerokości do wysokości obszaru wyświetlania.
min-color Minimalna liczba bitów dla każdej komponenty koloru na wyjściowym urządzeniu.
min-color-index Minimalna liczba kolorów, które urządzenie może wyświetlić.
min-height Minimalna wysokość obszaru wyświetlania, np. okno przeglądarki.
min-monochrome Minimalna liczba bitów dla każdej „koloru” na monochromatycznym urządzeniu (np. w grayscale).
min-resolution Najniższa rozdzielczość urządzenia, używana dpi lub dpcm.
min-width Minimalna szerokość obszaru wyświetlania, na przykład okno przeglądarki.
monochrome

Bit depth na każdy piksel monochromatycznego bufora ramki urządzenia wyjściowego.

Jeśli urządzenie nie ma ekranu czarno-białego, wartość wynosi 0.
orientation Kierunek obracania viewportu (poziomy czy pionowy tryb).
overflow-block

Jak urządzenie wyjściowe obsługuje zawartość wypływającą poza viewport wzdłuż osi blokowej?

Dodany w Media Queries Level 4.
overflow-inline

Czy zawartość wypływająca poza viewport można przewijać wzdłuż osi wewnętrznej?

Dodany w Media Queries Level 4.
pointer

Głównym mechanizmem wejścia jest urządzenie wskazujące? Jeśli tak, jak duża jest jego dokładność?

Dodany w Media Queries Level 4.
prefers-color-scheme

Czy użytkownik ma skłonność do wyboru jasnych czy ciemnych schematów kolorów?

Dodany w Media Queries Level 5.
prefers-contrast

Sprawdź, czy użytkownik prosi system o zwiększenie lub zmniejszenie kontrastu między podobnymi kolorami.

Dodany w Media Queries Level 5.
prefers-reduced-motion

Czy użytkownik chce, aby na stronie pojawiło się mniej efektów dynamicznych?

Dodany w Media Queries Level 5.
prefers-reduced-transparency

Czy użytkownik ma skłonność do wyboru niższej przezroczystości?

Dodany w Media Queries Level 5.
resolution Rozdzielczość urządzenia wyjściowego, używana dpi lub dpcm.
scan Proces skanowania urządzenia wyjściowego (przydatne dla telewizji itp.).
scripting

Sprawdź, czy skryptowanie (np. JavaScript) jest dostępne.

Dodany w Media Queries Level 5.
update

Częstotliwość aktualizacji renderowania treści urządzenia wyjściowego.

Dodany w Media Queries Level 4.
width Szerokość viewportu.

Więcej przykładów

Przykład 2

Ukryj elementy, gdy szerokość przeglądarki wynosi 600px lub mniej:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Spróbuj sam

Przykład 3

Jeśli szerokość viewportu wynosi 800 pikseli lub więcej, ustaw kolor tła za pomocą zapytania media na fiolet cytrynowy; jeśli szerokość viewportu wynosi między 400 a 799 pikseli, ustaw kolor tła na zielonozielony. Jeśli szerokość viewportu wynosi mniej niż 400 pikseli, kolor tła będzie delikatnie niebieski:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

Spróbuj sam

Przykład 4

Stwórz responsywną menu nawigacyjne (poziome wyświetlanie na dużych ekranach, pionowe wyświetlanie na małych ekranach):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Spróbuj sam

Przykład 5

Użyj media query do tworzenia responsywnego układu kolumn:

/* Na ekranach o szerokości 992px lub mniejszej, z czterech kolumn zmieni się na dwie */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Na ekranach o szerokości mniejszej lub równej 600 pikseli, każda kolumna będzie układana w pionie zamiast poziomo */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Spróbuj sam

Przykład 6

Użyj media query do tworzenia responsywnych stron internetowych:

Spróbuj sam

Przykład 7

Media query mogą również być używane do zmiany układu strony na podstawie kierunku przeglądarki. Możesz napisać zestaw właściwości CSS, które będą stosowane tylko wtedy, gdy szerokość okna przeglądarki jest większa niż wysokość (tzn. w kierunku poziomym).

Jeśli kierunek jest w trybie poziomym, użyj tła o jasnym niebieskim kolorze:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Spróbuj sam

Przykład 8

Użyj media query, aby ustawić kolor tekstu na zielony podczas wyświetlania dokumentu na ekranie, oraz na czarny podczas drukowania:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

Spróbuj sam

Przykład 9

Lista rozdzielona przecinkami: użycie przecinka do dodania kolejnej media query do istniejącej (działa jak operator OR):

/* Kiedy szerokość jest między 600px a 900px lub większa niż 1100px - zmień wygląd <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Spróbuj sam

Wsparcie przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje reguły @media.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9