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.