Articolo originale: Media Query CSS Tutorial – Standard Resolutions, CSS Breakpoints, and Target Phone Sizes di Cem Eygi

Tradotto e adattato da: Ilenia Magoni

Nel passato, creare un sito web era molto più semplice. Oggi il layout di un website deve adattarsi non solo ai computer, ma anche a tablet, dispositivi mobile, e pure TV.

Fare un sito web con un layout adattabile è chiamato Web Design Responsivo. E le Media Query in CSS sono una delle parti più importanti del Design Responsivo. In questo articolo vedremo nel dettaglio le Media Query e come usarle in CSS.

Se preferisci puoi vedere la video versione qua sotto:

Cosa è una Media Query?

Una Media Query è una funzionalità di CSS3 che fa adattare il layout di una pagina a diverse dimensioni di schermo e diversi tipi di media.

Sintassi

@media media type and (condition: breakpoint) {
  // CSS rules
}

Possiamo creare regole per diversi tipi di media con una varietà di condizioni. Se la condizione o il tipo di media sono quelli, allora le regole dentro la media query saranno applicate, altrimenti non lo saranno.

La sintassi potrebbe essere complicata all'inizio, quindi spieghiamo ogni parte una alla volta in dettaglio...

Regola @media

Iniziamo definendo le media query con la regola @media è poi includiamo le regole CSS all'interno delle parentesi graffe. La regola @media è anche usata per specificare il tipo di media.

@media () {
  // CSS rules
}

Parentesi

Dentro le parentesi, impostiamo la condizione. Per esempio, voglio applicare un font più grande per dispositivi mobili. Per farlo, dobbiamo impostare una massima larghezza che verifica la larghezza del dispositivo:

.text {
  font-size: 14px;
}

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

In genere, la dimensione del testo sarà 14px, ma visto che abbiamo applicato una media query, cambierà a 16px quando un dispositivo ha una larghezza massima di 480px o meno.

Importante: metti le tue media query sempre alla fine del tup file CSS.

Tipi di media

Se non applichiamo un tipo di media, la regola @media influenza tutti i tipi di dispositivi come default. Altrimenti, i tipi di media vengono dopo la regola @media. Ci sono molti tipi di dispositivi, ma possiamo raggrupparli in quattro categorie:

  • all — per tutti i tipi di media
  • print — per le stampanti
  • screen — per gli schermi di computer, tablet e smartphone
  • speech — per lettori di schermo che "leggono" la pagina ad alta voce

Per esempio, quando voglio selezionare solo gli schermi, metto la parola chiave screen dopo la regola @media. Devo anche concatenare le regole con la parola chiave "and":

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Breakpoint

Breakpoint è forse il termine che sentirai usare e userai più comunemente. Un breakpoint è chiave per determinare quando cambiare layout e usare le nuove regole dentro le media query. Torniamo indietro al nostro esempio all'inizio:

@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Qui il breakpoint è 480px. Ora la media query sa quando settare o sovrascrivere la nuova classe. In pratica, se la larghezza di un dispositivo è più piccola di 480px, la classe text sarà applicta, altrimenti non lo sarà.

Breakpoint comuni: c'è una risoluzione standard?

Una delle domande più comuni è "Quale breakpoint dovrei usare?". Ci sono un sacco di dispositi sul mercato quindi non possiamo e non dovrebbo definire breakpoint fissi per ognuno di loro.

Per questo non possiamo dire che ci sono delle risoluzioni standard per i dispositivi, ma ci sono dei breakpoint comunemente usati. Se stai usando un framework CSS (tipo Bootstrap, Bulma, ecc) puoi anche usare i loro breakpoint.

Ora vediamo alcuni breakpoint comuni per le larghezze dei dispositivi:

  • 320px — 480px: dispositivi mobili
  • 481px — 768px: iPad, Tablet
  • 769px — 1024px: schermi piccoli, laptop
  • 1025px — 1200px: computer desktop, schermi grandi
  • 1201px and more —  schermi extra large, TV

Come ho detto sopra questi breakpoint possono essere diversi e non c'è uno standard esattamente definito, ma questi sono alcuni comunemente usati.

Tirando le somme

Il design responsivo oggigiorno non può mancare nel campo del design e sviluppo web. Le media query sono una delle più importanti parti del costruire layout responsivi e spero che troverai il mio post utile per capire come funzionano le media query.

Se vuoi imparare di più sullo sviluppo web, iscriviti al mio canale.

Grazie per aver letto!