CSS zapytania mediowe

CSS2 wprowadził typy mediów

CSS2 wprowadził @media Zasady, które pozwalają na definiowanie różnych zasad stylu dla różnych typów mediów.

Na przykład: może masz zestaw zasad stylu dla ekranu komputerowego, zestaw dla drukarki, zestaw dla urządzeń przenośnych, nawet zestaw dla telewizji, itp.

Niestety, oprócz typu mediów do druku, te typy mediów nigdy nie były szeroko wspierane przez urządzenia.

CSS3 wprowadził zapytania media

Zapytania media w CSS3 rozszerzają koncept typów mediów w CSS2: zamiast szukać typu urządzenia, skupiają się na możliwościach urządzenia.

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

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

Użycie zapytań media to popularna technika, która pozwala dostarczać dostosowane arkusze stylów dla komputerów stacjonarnych, laptopów, tabletów i telefonów (np. iPhone i telefony Android).

Wspieranie przeglądarek

Liczby w tabeli wskazują, które przeglądarki całkowicie wspierają @media pierwsza wersja przeglądarki wspierająca regułę.

Atrybut
@media 21.0 9.0 3.5 4.0 9.0

Gramatyka zapytania media

Zapytania media składają się z jednego typu mediów i mogą zawierać jedną lub więcej wyrażeń, które można rozwiązać na prawda lub fałsz.

@media nie|tylko mediatype i (wyrażenia) {
  CSS-Code;
{}

Jeśli określony typ mediów pasuje do typu urządzenia wyświetlającego dokument i wszystkie wyrażenia w zapytaniu media są prawdziwe, wynik zapytania wynosi prawda. Gdy zapytanie media jest prawdziwe, stosuje się odpowiedni arkusz stylów lub reguły stylu i przestrzega się normalnych zasad kaskadowości.

O ile nie używasz operatora not lub only, typ mediów jest opcjonalny i domyślny wszystkie Typy.

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

<link rel="stylesheet" media="mediatype i|nie|tylko (wyrażenia)" href="print.css">

CSS3 Typy Mediów

Wartość Opis
wszystkie Dla wszystkich typów urządzeń mediowych.
druk Dla drukarki.
ekran Dla komputerów, tabletów, smartfonów i innych.
mówienie Dla ekranów czytania ekranu, które czytają stronę na głos.

Prosty przykład media query

Jednym z sposobów użycia media query jest umieszczenie alternatywnego fragmentu CSS w arkuszu stylów.

Poniższy przykład zmienia kolor tła na jasnozielony, jeśli szerokość okna przeglądarki wynosi 480 pikseli lub więcej (jeśli szerokość okna przeglądarki jest mniejsza niż 480 pikseli, kolor tła będzie różowy):

Przykład

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

Spróbuj sam

Poniższy przykład pokazuje menu, które przesuwa się do lewej strony strony, jeśli szerokość okna przeglądarki wynosi 480 pikseli lub więcej (jeśli szerokość okna przeglądarki jest mniejsza niż 480 pikseli, menu będzie umieszczone na górze zawartości):

Przykład

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
{}

Spróbuj sam

Więcej przykładów zapytań mediowych

Aby zobaczyć więcej przykładów zapytań mediowych, przejdź do następnej strony:Przykłady MQ CSS.

Podręcznik CSS @media

Pełne przeglądy wszystkich typów mediów i właściwości/ekspresji, zobacz nasze Reguła @media w odniesieniu do CSS.