Typy mediów w CSS3

Plansza interaktywna wrzesień 2014

URL:
http://www.plotkarka.eu/Pi/css3-mediaqueries/
Autor:
Radosław Kowaluk

Wstęp

Typy mediów (ang. Media types)
Określają, jak dokument jest przedstawiany na różnych nośnikach: ekranie, papierze itp. W CSS3 dodatkowo możemy zdefiniować warunki np. orientacje, szerokość (w tym maksymalną lub minimalną).
Reguły i atrybut media
opis
@media Media types { }Reguła definiuje style CSS
@import URL | url() Media typesReguła importuje style CSS
<link; source; style media="Media types" src...Atrybut łączy plik styli CSS
Typy mediów
Typ Opis
all Dla wszystkich urządzeń.
braille Dla dotykowych urządzeń (sprzężenia zwrotnego) Braille'a.
embossed Dla stronicowych drukarek Braille'a.
handheld Dla urządzeń kieszonkowych
print Dla materiałów i dokumentów przeglądanych na ekranie w trybie podglądu wydruku.
projection Dla prezentacji prezentowanych np. za pomocą rzutników.
screen Przede wszystkim dla kolorowych monitorów komputerowych.
speech Dla syntezatorów mowy.
tty Dla mediów używających stałej siatki znaków.
tv Dla odbiorników telewizyjnych

Uwagi:

Typy mediów w liście odzielamy przecinkami.

Reguły @media i @import

Plik styl.css zawiera kod:

h1 {color: silver;}

Grupy i typy mediów

Grupy mediów
Grupa Opis
I ciągłe/stronicowane
II wizualne/dźwiękowe/mowa/dotykowe
III siatka/bitmapa
IV interaktywne/statyczne
Zależności między grupami mediów a typami mediów
ZależnośćGrupy
TypyIIIIIIIV
brailleciągłedotykowesiatkaoba
embossedstronicowanedotykowesiatkastatyczne
handheldobawizualne. dźwiękowe, mowaobaoba
printstronicowanewizualnebitmapowestatyczne
projectionstronicowanewizualnebitmapoweinteraktywne
screenciągłewizualne, audiobitmapoweoba
speechciągłemowanie dotyczyoba
ttyciągłewizualnesiatkaoba
tvobawizualne, audiobitmapoweoba

Cechy mediów

Składnia zapytań

Operatory logiczne
Operator Opis
, separator oraz logiczne lub
and logiczne i
not logiczne nie
only tylko

Cechy mediów

Cechy mediów
Prefiks, cecha, wartość Opis
([min-|max-]width:length) szerokość
([min-|max-]height:length) wysokość
([min-|max-]device-width:length) szerokość ekranu
([min-|max-]device-height:length) wysokość ekranu
(orientation:[portrait | landscape]) orientacja pionowa lub pozioma
([min-|max-]aspect-ratio:ratio) proporcje strony
([min-|max-]device-aspect-ratio:ratio) proporcje ekranu
([min-|max-]color:integer) kolor
([min-|max-]color-index:integer) ilość kolorów
([min-|max-]monochrome:integer) monochromatyczny
([min-|max-]resolution:resolution) rozdzielczość
(scan: [progressive | interlace]) skanowanie (dotyczy TV)
(grid:integer) siatka

Cechy mediów

Wartości i jednostki

Wartości i jednostki cech mediów
Wartość Opis
length liczba z jednostką
portrait orientacja pionowa
landscape orientacja pozioma
ratio ułamek (proporcja) z symbolem "/"*
integer liczba całkowita
resolution liczba z jednostką rozdzielczości (dpi|dpcm)*
progressive progresywny
interlace z przeplotem

Uwagi:

Skrót RWD (ang. Responsive Web Design) określa techniki tworzenia stron internetowych, których układ automatycznie dostosowuje do rozdzielczości ekranu. Nie jest to termin normatywny.

Cechy mediów