Najnowsze tutoriale tworzenie stron internetowych
 

CSS Zapytania mediów


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
print 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.