CSS2 Wprowadzony Typy mediów
@media Reguła wprowadzona w CSS2, pozwoliło na zdefiniowanie różnych reguły stylów dla różnych typów nośników.
Przykłady: Można mieć jeden zestaw reguł stylu na ekranach komputerów, po jednym dla drukarek, jeden dla urządzeń przenośnych, po jednym dla urządzeń telewizyjnych typu, i tak dalej.
Niestety, te typy nośników nie ma dużo wsparcia przez urządzenia, inne niż typu nośnika.
CSS3 wprowadza media Zapytania
Zapytania o media w CSS3 przedłużyć CSS2 typów mediów pomysł: Zamiast szukać dla typu urządzenia, patrzą na możliwości urządzenia.
Zapytania o media mogą być wykorzystane do sprawdzenia wiele rzeczy, takich jak:
- szerokość i wysokość wziernika
- Szerokość i wysokość urządzenia
- orientacji (czy tablet / telefon w trybie pionowym, jak?)
- rozkład
Korzystanie zapytań o media są popularną techniką dostarczania arkusz stylów dostosowanych do tabletów, iPhone i androidów.
Pomoc Browser
Liczby w tabeli określa się pierwsza wersja przeglądarki, której w pełni popiera zasadę @media.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Multimedia Składnia zapytania
Zapytanie mediów składa się z typu nośnika i może zawierać jeden lub więcej wyrażeń, które są rozpoznawane jako prawdziwe lub fałszywe.
@media not|onlymediatype and (expressions) {
CSS-Code;
}Wynikiem zapytania jest prawdą, jeśli określony typ nośnika pasuje typ urządzenia, dokument jest wyświetlany na i wszystkie wyrażenia w zapytaniu mediów są prawdziwe. Kiedy zapytanie o media jest prawdą, odpowiednie przepisy arkusz stylów lub stylów są stosowane, zgodnie z normalnymi zasadami kaskadowy.
O ile nie używasz lub nie tylko operatorów, typ nośnika jest opcjonalny i all typ będzie domniemane.
Można również mieć różne arkusze stylów dla różnych mediów:
<link rel="stylesheet" media=" mediatype and|not|only ( expressions )"
href=" print.css ">Rodzaje nośników CSS3
| Wartość | Opis |
|---|---|
| all | Używany do wszystkich urządzeń typu nośnika |
| Służy do drukarek | |
| screen | Służy do ekranów komputerowych, tabletek, inteligentne telefony etc. |
| speech | Służy do screenreaders że "czyta" stronę głośno |
Multimedia Zapytania proste przykłady
Jednym ze sposobów wykorzystania zapytań o media jest posiadanie innej sekcji CSS bezpośrednio w arkuszu stylów.
Poniższy przykład zmienia background-color do jasnozielony jeśli rzutnia jest 480 pikseli szerokości i szerszy (jeśli rzutnia jest mniejsza niż 480 pikseli, background-color 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 będzie unosić się po lewej stronie, gdy rzutnia jest 480 pikseli szerokości i szerszy (jeśli rzutnia jest mniejsza niż 480 pikseli, menu będzie na wierzchu zawartości):
Przykład
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left:216px;}
}
Spróbuj sam " CSS3 @media referencyjny
Aby uzyskać pełny przegląd wszystkich typów mediów i funkcje / wyrażeń, proszę spojrzeć na @media reguły w naszym odniesieniem CSS.