CSS => Zapytania o media

Składnia

@media [nie | tylko] mediatype i (funkcja mediów) {/ * Zasady CSS do zastosowania * /}

Parametry

Parametr	Detale
`mediatype`	(Opcjonalnie) Jest to rodzaj nośnika. Może to być wszystko w zakresie `all` do `screen` .
`not`	(Opcjonalnie) Nie stosuje CSS dla tego konkretnego rodzaju mediów i dotyczy wszystkich innych.
`media feature`	Logika identyfikująca przypadek użycia dla CSS. Opcje przedstawione poniżej.
Funkcja mediów	Detale
`aspect-ratio`	Opisuje proporcje docelowego obszaru wyświetlania urządzenia wyjściowego.
`color`	Wskazuje liczbę bitów na składnik koloru urządzenia wyjściowego. Jeśli urządzenie nie jest urządzeniem kolorowym, ta wartość wynosi zero.
`color-index`	Wskazuje liczbę wpisów w kolorowej tabeli przeglądowej dla urządzenia wyjściowego.
`grid`	Określa, czy urządzeniem wyjściowym jest urządzenie sieciowe, czy urządzenie bitmapowe.
`height`	Funkcja media wysokości opisuje wysokość powierzchni renderowania urządzenia wyjściowego.
`max-width`	CSS nie będzie stosowany na szerokości ekranu większej niż określona.
`min-width`	CSS nie będzie stosowany w przypadku szerokości ekranu węższej niż określona.
`max-height`	CSS nie będzie stosowany na wysokości ekranu większej niż określona.
`min-height`	CSS nie będzie stosowany na wysokości ekranu mniejszej niż określona.
`monochrome`	Wskazuje liczbę bitów na piksel na urządzeniu monochromatycznym (w skali szarości).
`orientation`	CSS wyświetli się tylko wtedy, gdy urządzenie używa określonej orientacji. Zobacz uwagi, aby uzyskać więcej informacji.
`resolution`	Wskazuje rozdzielczość (gęstość pikseli) urządzenia wyjściowego.
`scan`	Opisuje proces skanowania telewizyjnych urządzeń wyjściowych.
`width`	Funkcja szerokości mediów opisuje szerokość powierzchni renderowania urządzenia wyjściowego (na przykład szerokość okna dokumentu lub szerokość pola strony na drukarce).
Przestarzałe funkcje	Detale
`device-aspect-ratio`	`Deprecated` CSS będą wyświetlane tylko na urządzeniach, których stosunek wysokości do szerokości odpowiada podanemu współczynnikowi. Jest to `deprecated` funkcja i nie gwarantuje się jej działania.
`max-device-width`	`Deprecated` samo, co `max-width` ale mierzy fizyczną szerokość ekranu, a nie szerokość wyświetlania przeglądarki.
`min-device-width`	`Deprecated` samo co `min-width` ale mierzy fizyczną szerokość ekranu, a nie szerokość wyświetlania przeglądarki.
`max-device-height`	`Deprecated` Taki sam jak `max-height` ale mierzy fizyczną szerokość ekranu, a nie szerokość wyświetlania przeglądarki.
`min-device-height`	`Deprecated` Taki sam jak `min-height` ale mierzy fizyczną szerokość ekranu, a nie szerokość wyświetlania przeglądarki.

Uwagi

Zapytania o media są obsługiwane we wszystkich nowoczesnych przeglądarkach, w tym Chrome, Firefox, Opera i Internet Explorer 9 i nowsze.

Należy pamiętać, że funkcja multimediów orientation nie ogranicza się do urządzeń mobilnych. Opiera się na szerokości i wysokości rzutni (nie okna ani urządzeń).

Tryb poziomy ma miejsce, gdy szerokość rzutni jest większa niż wysokość rzutni.

Tryb pionowy ma miejsce, gdy wysokość rzutni jest większa niż szerokość rzutni.

Zwykle oznacza to, że monitor biurkowy jest w trybie poziomym, ale czasami może to być portret.

W większości przypadków urządzenia mobilne zgłaszają swoją rozdzielczość, a nie rzeczywisty rozmiar pikseli, który może się różnić ze względu na gęstość pikseli. Aby zmusić ich do zgłaszania ich rzeczywistego rozmiaru w pikselach, dodaj następujący tag w tagu head :

<meta name="viewport" content="width=device-width, initial-scale=1">

Podstawowy przykład

@media screen and (min-width: 720px) {
    body {
        background-color: skyblue;
    }
}

Powyższe zapytanie o media określa dwa warunki:

Stronę należy wyświetlić na normalnym ekranie (nie na wydrukowanej stronie, projektorze itp.).
Szerokość portu widoku użytkownika musi wynosić co najmniej 720 pikseli.

Jeśli te warunki zostaną spełnione, style wewnątrz zapytania o media będą aktywne, a kolor tła strony będzie błękitny.

Zapytania o media są stosowane dynamicznie. Jeśli podczas ładowania strony zostaną spełnione warunki określone w zapytaniu o media, CSS zostanie zastosowany, ale zostanie natychmiast wyłączony, jeśli warunki przestaną być spełniane. I odwrotnie, jeśli warunki początkowo nie zostaną spełnione, CSS nie zostanie zastosowany, dopóki nie zostaną spełnione określone warunki.

W naszym przykładzie, jeśli szerokość portu widoku użytkownika jest początkowo większa niż 720 pikseli, ale użytkownik zmniejsza szerokość przeglądarki, kolor tła przestanie być niebieski, gdy tylko użytkownik zmieni rozmiar portu widoku na mniej niż 720 pikseli szerokość.

Użyj na tagu linku

<link rel="stylesheet" media="min-width: 600px" href="example.css" />

Ten arkusz stylów jest nadal pobierany, ale jest stosowany tylko na urządzeniach o szerokości ekranu większej niż 600 pikseli.

typ mediów

Zapytania o media mają opcjonalny parametr mediatype . Parametr ten jest umieszczony bezpośrednio po @media deklaracji ( @media mediatype ), na przykład:

@media print {
    html {
        background-color: white;
    }
}

Powyższy kod CSS nada elementowi DOM HTML biały kolor tła podczas drukowania.

Parametr mediatype ma opcjonalny prefiks not lub only , który zastosuje style do wszystkiego oprócz odpowiednio określonego mediatype lub tylko określonego typu nośnika. Na przykład poniższy przykład kodu zastosuje styl do każdego rodzaju nośnika oprócz print .

@media not print {
    html {
        background-color: green;
    }
}

I w ten sam sposób, aby wyświetlić go tylko na ekranie, można tego użyć:

@media only screen {
    .fadeInEffects {
        display: block;
    }
}

Listę mediatype można lepiej zrozumieć dzięki poniższej tabeli:

Typ mediów	Opis
`all`	Zastosuj do wszystkich urządzeń
`screen`	Domyślne komputery
`print`	Drukarki w ogóle. Służy do stylizowania drukowanych wersji stron internetowych
`handheld`	Urządzenia PDA, telefony komórkowe i urządzenia ręczne z małym ekranem
`projection`	Do projekcji prezentacji, na przykład projektory
`aural`	Systemy mowy
`braille`	Urządzenia dotykowe brajlowskie
`embossed`	Drukarki Braille'a stronicowane
`tv`	Urządzenia telewizyjne
`tty`	Urządzenia z siatką znaków o stałej wysokości. Terminale, urządzenia przenośne.

Używanie zapytań o media do kierowania na różne rozmiary ekranu

Często responsywne projektowanie stron internetowych obejmuje zapytania o media, które są blokami CSS, które są wykonywane tylko wtedy, gdy spełniony jest warunek. Jest to przydatne w przypadku responsywnego projektowania stron internetowych, ponieważ można użyć zapytań o media, aby określić różne style CSS dla mobilnej wersji witryny w porównaniu do wersji na komputery.

@media only screen and (min-width: 300px) and (max-width: 767px) {
    .site-title {
        font-size: 80%;
    }

    /* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .site-title {
        font-size: 90%;
    }

    /* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}

@media only screen and (min-width: 1024px) {
    .site-title {
        font-size: 120%;
    }

    /* Styles in this block are only applied if the screen size is over 1024px wide. */
}

Szerokość a rzutnia

Kiedy używamy „width” do zapytań o media, ważne jest prawidłowe ustawienie metatagu. Podstawowy metatag wygląda tak i należy go umieścić w tagu <head> .

<meta name="viewport" content="width=device-width,initial-scale=1">

Dlaczego to jest ważne?

Na podstawie definicji MDN „szerokość” wynosi

Funkcja szerokości mediów opisuje szerokość powierzchni renderowania urządzenia wyjściowego (na przykład szerokość okna dokumentu lub szerokość pola strony na drukarce).

Co to znaczy?

View-port to szerokość samego urządzenia. Jeśli rozdzielczość ekranu wskazuje, że rozdzielczość wynosi 1280 x 720, szerokość portu widoku to „1280px”.

Częściej wiele urządzeń przydziela inną liczbę pikseli, aby wyświetlić jeden piksel. Na przykład iPhone 6 Plus ma rozdzielczość 1242 x 2208. Ale rzeczywista szerokość rzutni i wysokość rzutni wynosi 414 x 736. Oznacza to, że do utworzenia 1 piksela służą 3 piksele.

Ale jeśli nie ustawisz poprawnie meta , spróbuje wyświetlić twoją stronę w natywnej rozdzielczości, co powoduje oddalenie widoku (mniejsze teksty i obrazy).

Zapytania o media dla ekranów Retina i Non Retina

Chociaż działa to tylko w przeglądarkach opartych na WebKit, jest to pomocne:

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

Informacje ogólne

Na wyświetlaczu występują dwa rodzaje pikseli. Jeden to piksele logiczne, a drugi to piksele fizyczne. Przeważnie fizyczne piksele zawsze pozostają takie same, ponieważ są takie same dla wszystkich urządzeń wyświetlających. Logiczne piksele zmieniają się w zależności od rozdzielczości urządzeń, aby wyświetlać piksele wyższej jakości. Współczynnik pikseli urządzenia to stosunek pikseli fizycznych do pikseli logicznych. Na przykład MacBook Pro Retina, iPhone 4 i wyżej zgłaszają współczynnik pikseli urządzenia 2, ponieważ fizyczna rozdzielczość liniowa jest dwukrotnie większa niż rozdzielczość logiczna.

Powodem, dla którego działa tylko z przeglądarkami opartymi na WebKit, jest:

Prefiks dostawcy -webkit- przed regułą.
Nie zostało to zaimplementowane w silnikach innych niż WebKit i Blink.

Terminologia i struktura

Zapytania o media pozwalają na stosowanie reguł CSS w zależności od typu urządzenia / nośnika (np. Ekranu, wydruku lub urządzenia przenośnego) zwanego typem nośnika , dodatkowe aspekty urządzenia są opisane za pomocą funkcji nośnika, takich jak dostępność koloru lub wymiarów rzutni.

Ogólna struktura zapytania o media

@media [...] {
    /* One or more CSS rules to apply when the query is satisfied */
}

Zapytanie o media zawierające typ mediów

@media print {
    /* One or more CSS rules to apply when the query is satisfied */
}

Zapytanie o media zawierające typ nośnika i funkcję nośnika

@media screen and (max-width: 600px) {
    /* One or more CSS rules to apply when the query is satisfied */
}

Kwerenda medialna zawierająca funkcję medialną (i niejawny typ medialny „wszystkie”)

@media (orientation: portrait) {        
    /* One or more CSS rules to apply when the query is satisfied */
}

Zapytania o media i IE8

Zapytania o media nie są w ogóle obsługiwane w IE8 i niższych wersjach.

Obejście oparte na JavaScript

Aby dodać obsługę IE8, możesz użyć jednego z kilku rozwiązań JS. Na przykład, Odpowiadać można dodać dodać obsługę zapytań mediów dla IE8 tylko z następującego kodu:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries to kolejna biblioteka, która robi to samo. Kod dodawania tej biblioteki do kodu HTML byłby identyczny:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Alternatywa

Jeśli nie podoba Ci się rozwiązanie oparte na JS, powinieneś również rozważyć dodanie arkusza stylów tylko dla IE <9, w którym dostosowujesz stylizację do IE <9. W tym celu do kodu należy dodać następujący kod HTML:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Uwaga :

Technicznie jest to jeszcze jedna alternatywa: użycie hacków CSS do atakowania IE <9. Ma taki sam wpływ jak arkusz stylów tylko w IE <9, ale nie potrzebujesz do tego oddzielnego arkusza stylów. Nie polecam jednak tej opcji, ponieważ produkują nieprawidłowy kod CSS (co jest tylko jednym z kilku powodów, dla których używanie hacków CSS jest obecnie powszechnie odrzucane).

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

CSS
Zapytania o media

Szukaj…