CSS3 media Zapytania
typy nośników CSS2
@media
reguła jest opisany w CSS2 i może być dostosowany do różnych rodzajów mediów odmienne style.
Na przykład: można ustawić różne reguły stylów dla różnych rodzajów mediów (w tym monitory, urządzenia przenośne, telewizory, itp).
Ale te typy multimediów wsparcie na wielu urządzeniach wciąż dość przyjazny.
CSS3 media Zapytania
zapytania CSS3 multimedialnych dziedziczy wszystkie typy nośników CSS2 myślowe: Zamiast znalezienia rodzaj sprzętu, ustawienia wyświetlania CSS3 według adaptacji.
Zapytania o media mogą być wykorzystywane do wykrywania wielu rzeczy, takich jak:
- rzutni (Windows) w szerokości i wysokości
- Szerokość i wysokość urządzenia
- Kierunku poziomym ekranie (smartphone, pionowe ekranu).
- uchwała
Obecnie, wiele dla telefonu Apple, Android telefonu, tabletu i innych urządzeń będzie używany do wyświetlania zapytania.
Pomoc Browser
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji nieruchomości.
nieruchomość | |||||
---|---|---|---|---|---|
@media | 21,0 | 9,0 | 3,5 | 4,0 | 9,0 |
Składnia zapytań Multimedia
Zapytanie Multimedia skomponowana przez różne media, mogą zawierać jeden lub więcej wyrażeń, ekspresja jest ustanowiony zgodnie z warunkami zwraca prawdę lub fałsz.
@media not|only mediatype and (expressions) { CSS-Code; }
Jeśli określony typ urządzenia multimedialnego typu dopasowania, zapytanie zwraca true, dokument pokaże efekt określonego stylu w urządzenie dopasowane.
Jeśli nie używasz nie tylko operatora czy inaczej, wszystkie style dostosuje wyświetlanie na wszystkich urządzeniach.
Nie: nie stosować wyłączenie niektórych urządzeń, takich jak @media nie drukuje (urządzenie bez drukowania).
tylko: ustawić kilka specjalnych typów nośników.Wsparcie dla mediów Zapytania urządzeń mobilnych, jeśli jest tylko kluczowe, przeglądarka WWW dla urządzeń mobilnych będzie ignorować tylko słowa kluczowego i ekspresji po aplikacji bezpośrednio z pliku stylu. Dla mediów zapytania, gdy urządzenie nie obsługuje umiejętność czytania, ale Typ nośnika typ przeglądarki internetowej, kluczowe napotkał tylko ignoruje ten plik stylu.
wszystkich: wszystkie urządzenia, należy zawsze widzieć.
Można również użyć różnych plików Styl na różnych nośnikach:
typy nośników CSS3
wartość | opis |
---|---|
wszystko | Stosowany do wszystkich typów urządzeń multimedialnych |
druk | W przypadku drukarek |
ekran | Na ekranach komputerów, tabletów, smartfonów. |
przemówienie | Dla czytników ekranu |
Proste przykłady zapytania multimedialnej
Za pomocą zapytania multimedialne mogą być wykorzystane w celu zastąpienia oryginalnej stylu odpowiadający stylu na określonym urządzeniu.
Poniższe przykłady zmienić kolor tła ekranu widocznego rozmiaru okna większa niż 480 pikseli wyposażenia:
Przykłady
body {
background-color: jasnozielony;
}
}
Spróbuj »
Poniższe przykłady są widoczne w wielkości okna ekran większy niż 480 pikseli będzie unosić się na stronie menu po lewej:
Przykłady
#leftsidebar {width: 200px; pływaka: left;}
#main {margin-left: 216px; }
}
Spróbuj »
CSS3 odniesienia @media
Odkryj więcej treści multimedialnych mogą odnieść @media zasad.