5.15 Médiától függő CSS

A mobil eszközök elterjedésével egyre fontosabbá vált a különböző média típusokra a megfelelő formázás létrehozása. A média eszközöknél leginkább a képernyő szélessége a döntő, de egyéb kérdések is fontosak, mint például a nyomtatóknál a felbontás.

A HTML oldalakon a media választás:

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen and (min-width: 360px)" href="mobil.css">
<link rel="stylesheet" media="screen and (min-width: 768px)" href="tablet.css">
A fenti példában különböző stíluslapokat használ az oldal, attól függően, hogy milyen médián jelenítjük meg az oldalt. Az alapértelmezett stílus a style.css és a különböző médiákban felüldefiniáljuk a megfelelő elemeket.
 
Általában a CSS-ben az alábbi módon különböztetjük meg a kijelzőtől függően a stíluselemeket:
/* nyomtatóra készült stílus */
@media print {
.....
}

/* kis képernyőre - mobiltelefonra - készült stílus */
@media screen and (min-width: 360px){
.....
}

/* tabletre készült stílus */
@media screen and (min-width: 768px){
.....
}
 
 
Az egyes területeken más és más értékeket kell adni az egyes stíluselemeknek. A médiától függő választásokat vagy a stíluslap elején definiáljuk, vagy pedig a lapban, amikor méreteket adunk meg.