Può essere utile in molti casi differenziare lo stile del proprio sito in base al dispositivo che lo visualizza, sia esso un tablet, uno smartphone o un desktop. Su device con display (e risoluzione) minore conviene avere dei bottoni più grandi in modo da aumentare l’usabilità del sito.
Il codice da inserire nell’ Head dell’html è:
1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)"/>
<link rel="stylesheet" type="text/css" href="desktop.css" media=" screen and (min-width: 481px)" />
<!–[if IE]>
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
<![endif]->
Internet Explorer come al solito non supporta la diversificazione del css in base all’attributo media, quindi necessita di un caricamento a parte, explorer.css può essere sostituito con desktop.css a meno che non si voglia creare un css personalizzato per Internet Eplorer ed un altro per gli altri browser.