HTML5 & CSS3

Media Queries w przykładach

Zapytania o media to temat dość obszerny, przynajmniej jak na CSS. Michał Kortas pod koniec ubiegłego roku napisał artykuł o wykorzystaniu ich w responsive web design. Tym razem artykuł zawierający większość zapytań o media z jakimi możesz się spotkać, od szerokości ekranu poprzez sprawdzenie typu urządzenia i ilości używanych przez ekran bitów po wyświetlacze o dużym zagęszczeniu pikseli typu „Retina”.

Media Queries są jednym, ze sposobów na „ugryzienie” RWD, przekładam tego typu rozwiązania nad te w JavaScript. Taki stan rzeczy jest spowodowany przede wszystkim wydajnością, ale okupiony ilością wspierających urządzeń. Wsparcie Media Queries jest względnie wysokie i wynosi 86,69% wg. caniuse.com. Problemy zaczynają się wraz z IE8.

Poniżej znajduje się spis 27 przykładów zapytań. Jeżeli nie znajdziesz tam odpowiedzi na swoje pytanie dotyczące zapytań o media to warto zajrzeć na stronę dokumentacji W3C.

Wszystkie urządzenia

@media all

Tylko do druku

@media print

Tylko czytniki ekranu

@media speech

Inne możliwe typy mediów: all, braille, handheld, print, projection, screen, tty, tv, embossed, speech, 3d-glasses

Powierzchnia wyświetlania QSXGA i większa

@media (min-width:2560px)

Powierzchnia wyświetlania HD 1080 i większa

@media (min-width:1920px)

Powierzchnia wyświetlania SVGA i większa

@media (min-width:800px)

Ekrany w pozycji pionowej

@media all and (orientation:portrait)

Ekrany w pozycji poziomej

@media all and (orientation:landscape)

Ekrany o wysokości dokładnie 600px

@media (device-height: 600px)

Ekrany o wysokości dokładnie 1080px

@media (device-height: 1080px)

Powierzchnia wyświetlania formacie PAL

@media (aspect-ratio: 4/3)

Powierzchnia wyświetlania w formacie HDTV

@media (aspect-ratio: 16/9)

Ekran w formacie PAL

@media (device-aspect-ratio: 4/3)

Ekran w formacie HDTV

@media (device-aspect-ratio: 16/9)

Tylko ekrany kolorowe

@media screen and (color)

TrueColor (32 bity)

@media screen and (color: 8)

Tu sprawa jest trochę skomplikowana. Zapytanie dokładnie brzmi „Czy to ekran i niebieski kolor zapisany jest na 8 bitach”. W uproszczeniu jest tak dlatego, że 8 bitowy monitor wyświetla kolor czerwony na 3 bitach, zielony na 3 bitach i niebieski na 2 bitach. Sprawdzenie czy ekran ma 8 bitów będzie wyglądać tak: @media all and (color: 2) – zależy od bitów na kolor niebieski. Następnie 16 bitów – czerwony na 6 bitach, zielony na 6 bitach i niebieski na 4. Odpowiednio 32 bitowy ekran – czerwony na 12 bitach, zielony na 12 bitach, niebieski na 8. Oczywiście wliczając kanał Alfa. Z jego pominięciem 32 bitowy monitor wyświetla kolor na 24 bitach.

Co najmniej High Color (16 bitów)

@media all and (min-color: 4)

Urządzenie nie używa CLUT

@media all and (color-index: 0)

Minimalnie 256 kolorów (wymaga CLUT)

@media all and (min-color-index: 256)

Urządzenie monochromatyczne

@media all and (monochrome)

Urządzenie monochromatyczne i minimalnie 2 bity na piksel

@media all and (min-monochrome: 2)

Telewizor ze skanowaniem międzyliniowym

@media tv and (scan: interlace)

Telewizor ze skanowaniem progresywnym

@media tv and (scan: progressive)

Urządzenie w których na wyjściu jest siatka lub bitmapa (starsze telefony komórkowe)

@media handheld and (grid)

Retina (Urządzenia o wysokim zagęszczeniu pikseli)

@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 2dppx)

Podsumowanie

Media Queries to zagadnienie, któremu zdecydowanie warto poświęcić jedno lub dwa popołudnia, gdyż ciągle rosnący udział urządzeń mobilnych zmusza do tworzenia bardziej elastycznych witryn. Wszystkie powyższe zapytania zostały użyte w demie. Standardowo przygotowane pliki pobierzecie z mojego konta na GitHub.

Pobierz pliki źródłowe

komentarzy 6

  • Awatar
    Paweł

    24 maja 2013 21:18

    „Retina (Urządzenia o wyskokim zagęszczeniu pikseli)” – macie tutaj literówkę.

    Odpowiedz
  • Awatar
    Stefan

    28 maja 2013 10:09

    Jak dla mnie zabrakło „max-width”, które jest bardzo przydatne.
    Osobiście staram się najpierw zrobić CSS-y w „czystym” RWD (używając max-width zamiast width, odpowiednio konstruując szkielet strony itp.), aby elementy same z siebie skalowały się.
    Potem tylko dodaję kilka media queries, które porządkują to co powinno wyglądać w inny sposób lub się „krzaczy”.

    Odpowiedz
    • Awatar
      Michał Załęcki

      28 maja 2013 16:50

      To nie jest inna właściwość tylko wg. przytoczonej w tekście dokumentacji po prostu jej inny prefix. Każda z przytoczonych właściwość posiadająca prefix min ma również prefix max. Niemniej wartym odnotowania jest, że to czy stosujemy max-width czy min-width definiuje po części czy nasze strony są „mobile first” czy nie.

      Odpowiedz
      • Awatar
        Stefan

        29 maja 2013 09:27

        No właśnie, różnica podejścia. Można zrobić skalowalną stronę bez użycia media queries lub z ich niewielką pomocą, a można też tak się do nich przywiązać, że w IE7 czy innej archaicznej przeglądarce będziemy mieli „wersję mobilną”…ewentualnie gimnastykować się ze skryptami.

        Moje podejście można samozwańczo nazwać „all first” :)

        Odpowiedz

Zostaw odpowiedź