Latest web development tutorials

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

@media ekranem oraz (min-width: 480px) {
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

@media ekranem oraz (min-width: 480px) {
#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.