Media Queries w przykładach


24 maja 2013 / Michał Załęcki


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

Tylko do druku

Tylko czytniki ekranu

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

Powierzchnia wyświetlania HD 1080 i większa

Powierzchnia wyświetlania SVGA i większa

Ekrany w pozycji pionowej

Ekrany w pozycji poziomej

Ekrany o wysokości dokładnie 600px

Ekrany o wysokości dokładnie 1080px

Powierzchnia wyświetlania formacie PAL

Powierzchnia wyświetlania w formacie HDTV

Ekran w formacie PAL

Ekran w formacie HDTV

Tylko ekrany kolorowe

TrueColor (32 bity)

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)

Urządzenie nie używa CLUT

Minimalnie 256 kolorów (wymaga CLUT)

Urządzenie monochromatyczne

Urządzenie monochromatyczne i minimalnie 2 bity na piksel

Telewizor ze skanowaniem międzyliniowym

Telewizor ze skanowaniem progresywnym

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

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

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



6 odpowiedzi na “Media Queries w przykładach”

  1. Paweł pisze:

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

  2. Stefan pisze:

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

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

      • Stefan pisze:

        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” :)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *