Cosa sono le media query

Le media query sono uno strumento che consente di definire differenti regole CSS in base alla dimensione dello schermo in modo da rendere un sito responsive

Sviluppare un sito web richiede particolare attenzione alla visualizzazione del sito su differenti dispositivi, per questo motivo sono state introdotte le media query che consente di definire differenti regole CSS in base alla dimensione dello schermo del dispositivo. Nella costruzione delle media query è possibile specificare numerose proprietà:

  • Altezza e larghezza del dispositivo;
  • L’orientamento del dispositivo landscape (orizzontale) o portrait (verticale);
  • La risoluzione dello schermo;
  • ecc.


In base alle regole definite e alla dimensione del dispositivo utilizzato (un computer, un tablet, uno smartphone, ecc.), saranno applicate determinate regole CSS in modo da ottimizzare la visualizzazione del sito web su quel particolare dispositivo. Per definire una media query occorre utilizzare il tag @media la cui corretta sintassi è la seguente:

    @media not|only mediatype and (media feature) {
        // Codice CSS
    }

E’ possibile decidere tramite not e only se applicare la regola che si sta definendo a determinati dispositivi. I dispositivi verrano identificati dal tipo del media e dalle sue caratteristiche. I possibili valori per i dispositivi sono:

  1. all: usato per applicare la regola a tutti i dispositivi;
  2. screen: usato per computer, tablet, smartphone, ecc.;
  3. speech: usato per screenreaders.

Un esempio di media query per schermi con dimensione minima di 480px è la seguente:

    @media screen and (min-width: 480px) {
        div {
            font-size: 14px;
        }
    }

Pubblicato in CSS, Front-end, Programmazione Taggato con: , , , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*