Przykład
Zmień background-color, jeśli rzutnia jest 480 pikseli szerokości lub szerszy:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Reguła @media służy do definiowania różnych reguły stylów dla różnych typów mediów / urządzeń.
W CSS2 Nazywało typy nośników, podczas gdy w CSS3 nazywa zapytań o media.
Zapytania o media spojrzeć na możliwości urządzenia i mogą być wykorzystane do sprawdzenia wiele rzeczy, takich jak:
- szerokość i wysokość wziernika
- Szerokość i wysokość urządzenia
- orientacji (is the tablet/phone in landscape or portrait mode?)
- rozkład
- i wiele więcej
Pomoc Browser
Liczby w tabeli określa się pierwsza wersja przeglądarki, której w pełni popiera zasadę @media.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3,5 | 4,0 | 9 |
Składnia CSS
@media not|onlymediatype and (media feature){
CSS-Code;
}Można również mieć różne arkusze stylów dla różnych mediów:
<link rel="stylesheet" media=" mediatype and|not|only ( media
feature )"
href=" mystylesheet.css ">Typy mediów
| Wartość | Opis |
|---|---|
| all | Używany do wszystkich urządzeń typu nośnika |
| aural | Przestarzała. Służy do syntezatorów mowy i dźwięku |
| braille | Przestarzała. Stosowany do urządzeń dotykowych Braille'a zwrotnych |
| embossed | Przestarzała. Służy do drukarek brajlowskich stronicowanej |
| handheld | Przestarzała. Służy do małych lub przenośnych urządzeń |
| Służy do drukarek | |
| projection | Przestarzała. Służy do planowanych prezentacji, takich jak zjeżdżalnie |
| screen | Służy do ekranów komputerowych, tabletek, inteligentne telefony etc. |
| speech | Służy do screenreaders który "reads" stronę głośno |
| tty | Przestarzała. Używany dla mediów używających siatki znaków stałym skoku, jak dalekopisów i terminali |
| tv | Przestarzała. Używany dla urządzeń telewizyjnych typu |
Funkcje multimedialne
| Wartość | Opis |
|---|---|
| aspect-ratio | Stosunek szerokości i wysokości wziernika |
| color | Liczba bitów na składowej koloru na urządzeniu wyjściowym |
| color-index | Liczba kolorów urządzenie może wyświetlać |
| device-aspect-ratio | Stosunek szerokości i wysokości urządzenia |
| device-height | Wysokość urządzenia, takie jak ekran komputera |
| device-width | Szerokość urządzenia, takie jak ekran komputera |
| grid | Czy urządzenie jest siatką lub bitmapę |
| height | Wysokość rzutni |
| max-aspect-ratio | Maksymalny stosunek szerokości i wysokości obszaru wyświetlania |
| max-color | Maksymalna liczba bitów na składowej koloru na urządzeniu wyjściowym |
| max-color-index | Maksymalna liczba kolorów urządzenie może wyświetlać |
| max-device-aspect-ratio | Maksymalny stosunek szerokości i wysokości urządzenia |
| max-device-height | Maksymalna wysokość urządzenia, takie jak ekran komputera |
| max-device-width | Maksymalna szerokość urządzenia, takie jak ekran komputera |
| max-height | Maksymalna wysokość obszaru wyświetlania, taki jak okno przeglądarki |
| max-monochrome | Maksymalna liczba bitów na "color" na monochromatycznych (greyscale) urządzenia |
| max-resolution | Maksymalna rozdzielczość urządzenia, za pomocą DPI lub dpcm |
| max-width | Maksymalna szerokość obszaru wyświetlania, taki jak okno przeglądarki |
| min-aspect-ratio | Minimalny stosunek szerokości i wysokości obszaru wyświetlania |
| min-color | Minimalna liczba bitów na składowej koloru na urządzeniu wyjściowym |
| min-color-index | Minimalna liczba kolorów urządzenie może wyświetlać |
| min-device-aspect-ratio | Minimalny stosunek szerokości i wysokości urządzenia |
| min-device-width | Minimalna szerokość urządzenia, takie jak ekran komputera |
| min-device-height | Minimalna wysokość urządzenia, takie jak ekran komputera |
| min-height | Minimalna wysokość obszaru wyświetlania, taki jak okno przeglądarki |
| min-monochrome | Minimalna liczba bitów na "color" na monochromatycznych (greyscale) urządzenia |
| min-resolution | Minimalna rozdzielczość urządzenia, za pomocą DPI lub dpcm |
| min-width | Minimalna szerokość obszaru wyświetlania, taki jak okno przeglądarki |
| monochrome | Liczba bitów na "color" na monochromatycznych (greyscale) urządzenia |
| orientation | Orientacja widoku (landscape or portrait mode) |
| overflow-block | W jaki sposób treść uchwyt urządzenia wyjściowego, który przelewa rzutnię wzdłuż osi bloku (added in Media Queries Level 4) |
| overflow-inline | Czy zawartość, która przelewa rzutnię wzdłuż osi inline być przewijane (added in Media Queries Level 4) |
| resolution | Rozdzielczość urządzenia wyjściowego, używając dpi lub dpcm |
| scan | Proces skanowania przyrządu wyjściowego |
| update-frequency | Jak szybko można urządzenie wyjściowe modyfikowania wyglądu zawartości (added in Media Queries Level 4) |
| width | Szerokość rzutni |
Więcej przykładów
Przykład
Użyj reguły @media do elastycznego projektowania:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
Spróbuj sam " Podobne strony
Kurs CSS: CSS mediów Zapytania