Zapytania o media CSS
Wprowadzone przez CSS2 typy mediów
Reguła @mediawprowadzona w CSS2 umożliwiła zdefiniowanie różnych reguł stylów dla różnych typów mediów.
Przykłady: możesz mieć jeden zestaw reguł stylu dla ekranów komputerowych, jeden dla drukarek, jeden dla urządzeń przenośnych, jeden dla urządzeń telewizyjnych itd.
Niestety, te typy nośników nigdy nie były obsługiwane przez urządzenia, poza typem nośnika druku.
Zapytania o media wprowadzone przez CSS3
Zapytania o media w CSS3 rozszerzyły ideę typów mediów CSS2: zamiast szukać typu urządzenia, patrzą na możliwości urządzenia.
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 dopasowanego arkusza stylów na komputery stacjonarne, laptopy, tablety i telefony komórkowe (takie jak telefony iPhone i telefony z systemem Android).
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje @mediaregułę.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Składnia zapytań o media
Zapytanie o media składa się z typu mediów i może zawierać jedno lub więcej wyrażeń, które dają odpowiedź prawda lub fałsz.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Wynik zapytania jest prawdziwy, jeśli określony typ nośnika jest zgodny z typem urządzenia, na którym jest wyświetlany dokument, a wszystkie wyrażenia w zapytaniu o media są prawdziwe. Gdy zapytanie o media jest prawdziwe, stosowany jest odpowiedni arkusz stylów lub reguły stylów zgodnie z normalnymi regułami kaskadowymi.
O ile nie używasz operatorów nie lub tylko, typ nośnika jest opcjonalny i
alltyp zostanie dorozumiany.
Możesz także mieć różne arkusze stylów dla różnych mediów:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
Typy mediów CSS3
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Zapytania o media Proste przykłady
Jednym ze sposobów wykorzystania zapytań o media jest umieszczenie alternatywnej sekcji CSS bezpośrednio w arkuszu stylów.
Poniższy przykład zmienia kolor tła na jasnozielony, jeśli widoczny obszar ma 480 pikseli szerokości lub szerszy (jeśli widoczny obszar ma mniej niż 480 pikseli, kolor tła będzie różowy):
Przykład
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Poniższy przykład pokazuje menu, które będzie unosić się po lewej stronie strony, jeśli widoczny obszar ma szerokość 480 pikseli lub szerszy (jeśli widoczny obszar ma mniej niż 480 pikseli, menu będzie znajdować się nad treścią):
Przykład
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Więcej przykładów zapytań o media
Więcej przykładów zapytań o media znajdziesz na następnej stronie: Przykłady CSS MQ .
CSS @media odniesienia
Pełny przegląd wszystkich typów mediów i funkcji/wyrażeń można znaleźć w regule @media w dokumentacji CSS .