Reguła CSS @media

❮ Poprzedni Pełne odniesienie CSS Dalej _

Przykład

Zmień kolor tła elementu <body> na „jasnoniebieski”, gdy okno przeglądarki ma szerokość 600 pikseli lub mniej:

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

Więcej przykładów „Wypróbuj sam” poniżej.

Definicja i użycie

Reguła @mediajest używana w zapytaniach o media w celu zastosowania różnych stylów dla różnych typów mediów/urządzeń.

Zapytania o media mogą służyć do sprawdzania wielu rzeczy, takich jak:

szerokość i wysokość rzutni
szerokość i wysokość urządzenia
orientacja (czy tablet/telefon jest w trybie poziomym czy pionowym?)
Rezolucja

Korzystanie z zapytań o media to popularna technika dostarczania dostosowanego arkusza stylów (responsywne projektowanie stron internetowych) na komputery stacjonarne, laptopy, tablety i telefony komórkowe.

Możesz również użyć zapytań o media, aby określić, że określone style są przeznaczone tylko dla dokumentów drukowanych lub czytników ekranu (typ mediów: druk, ekran lub mowa).

Oprócz typów mediów dostępne są również funkcje mediów. Funkcje multimedialne zapewniają bardziej szczegółowe informacje na temat zapytań o media, umożliwiając testowanie pod kątem określonej funkcji agenta użytkownika lub urządzenia wyświetlającego. Na przykład możesz zastosować style tylko do tych ekranów, które są większe lub mniejsze niż określona szerokość.

Obsługa przeglądarki

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje regułę @media.

Property
@media	21	9	3.5	4.0	9

Składnia CSS

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

znaczenie nie , tylko i i słów kluczowych:

not: słowo kluczowe not odwraca znaczenie całego zapytania o media.

only: jedyne słowo kluczowe uniemożliwia starszym przeglądarkom, które nie obsługują zapytań o media z funkcjami mediów, stosowanie określonych stylów. Nie ma to wpływu na nowoczesne przeglądarki.

oraz: Słowo kluczowe i łączy funkcję multimediów z typem multimediów lub innymi funkcjami multimediów.

Wszystkie są opcjonalne. Jeśli jednak używasz nie lub tylko , musisz również określić typ nośnika.

Możesz także mieć różne arkusze stylów dla różnych mediów, na przykład:

Rodzaje mediów

Value	Description
all	Default. Used for all media type devices
print	Used for printers
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that "reads" the page out loud

Funkcje multimedialne

Value	Description
any-hover	Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
aspect-ratio	The ratio between the width and the height of the viewport
color	The number of bits per color component for the output device
color-gamut	The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4)
color-index	The number of colors the device can display
grid	Whether the device is a grid or bitmap
height	The viewport height
hover	Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
inverted-colors	Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)
light-level	Current ambient light level (added in Media Queries Level 4)
max-aspect-ratio	The maximum ratio between the width and the height of the display area
max-color	The maximum number of bits per color component for the output device
max-color-index	The maximum number of colors the device can display
max-height	The maximum height of the display area, such as a browser window
max-monochrome	The maximum number of bits per "color" on a monochrome (greyscale) device
max-resolution	The maximum resolution of the device, using dpi or dpcm
max-width	The maximum width of the display area, such as a browser window
min-aspect-ratio	The minimum ratio between the width and the height of the display area
min-color	The minimum number of bits per color component for the output device
min-color-index	The minimum number of colors the device can display
min-height	The minimum height of the display area, such as a browser window
min-monochrome	The minimum number of bits per "color" on a monochrome (greyscale) device
min-resolution	The minimum resolution of the device, using dpi or dpcm
min-width	The minimum width of the display area, such as a browser window
monochrome	The number of bits per "color" on a monochrome (greyscale) device
orientation	The orientation of the viewport (landscape or portrait mode)
overflow-block	How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
resolution	The resolution of the output device, using dpi or dpcm
scan	The scanning process of the output device
scripting	Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)
update	How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
width	The viewport width

Więcej przykładów

Przykład

Ukryj element, gdy szerokość przeglądarki wynosi 600 pikseli lub mniej:

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

Przykład

Użyj mediaqueries, aby ustawić kolor tła na lawendowy, jeśli widoczny obszar ma szerokość 800 pikseli lub szerszy, lub jasnozielony, jeśli widoczny obszar ma szerokość od 400 do 799 pikseli. Jeśli widoczny obszar jest mniejszy niż 400 pikseli, kolor tła jest jasnoniebieski:

body {
  background-color: lightblue;
}

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

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

Przykład

Utwórz responsywne menu nawigacyjne (wyświetlane poziomo na dużych ekranach i pionowo na małych ekranach):

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

Przykład

Użyj zapytań o media, aby utworzyć responsywny układ kolumn:

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Przykład

Użyj zapytań o media, aby stworzyć responsywną stronę internetową:

Przykład

Zapytania o media mogą być również używane do zmiany układu strony w zależności od orientacji przeglądarki. Możesz mieć zestaw właściwości CSS, które będą miały zastosowanie tylko wtedy, gdy okno przeglądarki jest szersze niż jego wysokość, czyli tak zwana orientacja pozioma.

Użyj jasnoniebieskiego koloru tła, jeśli orientacja jest w trybie poziomym:

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

Przykład

Użyj mediaqueries, aby ustawić kolor tekstu na zielony, gdy dokument jest wyświetlany na ekranie, i czarny, gdy jest drukowany:

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

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

Przykład

Lista rozdzielana przecinkami : dodaj dodatkowe zapytanie o media do już istniejącego, używając przecinka (będzie to zachowywać się jak operator OR):

/* When the width is between 600px and 900px OR above 1100px - change the appearance of <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;
}
}