Media Queries w przykładach - Michał Załęcki

Wszystkie urządzenia

@media all

Tylko do druku

@media print

Tylko czytniki ekranu

@media speech

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". 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)