Corsi on-line

Responsive design: differenza tra *-device-width e *-width

Le media query di CSS permettono di definire delle regole di stile sulla base delle caratteristiche del dispositivo corrente, esse rappresentano uno strumento fondamentale per applicare i criteri del Responsive Design, questi ultimi infatti richiedono che ad aree di visualizzazione differenti vengano applicati stili diversi.

css3Sostanzialmente tali stili riguardano tre fattori: larghezza, altezza (nei loro valori minimi e massimi) e orientamento; a sua volta l’orientamento è determinato dal rapporto tra i primi due fattori: altezza superiore o uguale alla larghezza (portrait) e larghezza superiore all’altezza (landscape). A proposito di quanto appena detto, è possibile proporre il seguente esempio:

<link rel="stylesheet" media="(max-width: 640px)" href="max.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min.css">
<link rel="stylesheet" media="(orientation: portrait)" href="port.css">
<link rel="stylesheet" media="(orientation: landscape)" href="land.css">
<style>
      @media (min-width: 500px) and (max-width: 600px) {
        .....
      }
</style>

Sostanzialmente, lo snippet proposto introduce una serie di condizioni: se la finestra del browser ha una dimensione tra 0 e 640 pixel verrà impiegato max.css, se tale dimensione è pari ad almeno 640 pixel verrà utilizzato min.css e, nello stesso modo, verranno applicati port.css o land.css a seconda del fatto che la larghezza sia superiore all’altezza o meno. min-width introdurrà invece delle regole che verranno applicate per larghezze superiori al valore introdotto in media query, max-width quelle per larghezze inferiori.

In alternativa a queste ultime è possibile utilizzare *-device-width ma ciò potrebbe impedire di raggiungere un risultato ottimale perché i due costrutti non sono pefettamente intercambiabili; ad esempio min-width è basato sulla dimensione della finestra del browser, min-device-width prende invece come riferimento la dimensione del display che non necessariamente corrisponde a quella dell’area di visualizzazione.

In pratica *-device-width non prevede che i contenuti vengano adattati su device che permettono di ridimensionare le finestre, questo per via del fatto che nel caso specifico le media query si basano sulle dimensioni dello schermo di riferimento e non su quelle di tali finestre.

Per approfondire

Post correlati
I più letti del mese
Tematiche