CSS media queries: cosa sono e come utilizzarle

Le CSS media queries permettono di definire delle regole CSS che vengano applicate solo se la condizione specificata è vera.

Sono alla base dei cosiddetti siti responsive. Si tratta di siti che si adattano in funzione della risoluzione dello schermo del dispositivo dell’utente.

Per definire una CSS media query si utilizza la keyword @media.

Indice

CSS media queries: cosa sono

Le media queries consentono di suddividere un set di regole CSS in modo tale che vengano applicate solo a certe condizioni.

Di seguito puoi trovare un esempio di definizione di una media query:

@media screen and (max-width: 768px) {
  p {
    font-size: 16px;
  }
}

La media query definita sopra fa in modo che tutti i paragrafi della pagina web abbiano una dimensione di 16 pixels.

Tuttavia, tale regola verrà applicata solo quando la risoluzione dello schermo del dispositivo che visualizza la pagina web avrà dimensione pari o minore a 768px.

CSS media queries: come si usano

Una media query è composta da un media type (opzionale), un numero arbitrario di media feature che possono essere combinate utilizzando operatori logici.

CSS media types

I CSS media type definiscono la categoria di dispositivo al quale verranno applicate le regole CSS contenute nella media query.

I valori disponibili per i media type sono:

all
print
screen

CSS media features

Le CSS media features descrivono una caratteristica del dispositivo o del contesto di visualizzazione della pagina web.

I valori disponibili sono:

any-hover
any-pointer
aspect-ratio
color
color-gamut
color-index
display-mode
dynamic-range
forced-colors
grid
height
hover
inverted-colors
monochrome
orientation
overflow-block
overflow-inline
pointer
prefers-color-scheme
prefers-contrast
prefers-reduced-motion
resolution
scripting
update
video-dynamic-range
width

Nel seguito dell’articolo potrai vedere alcuni esempi di utilizzo di queste proprietà.

CSS media query: esempi

L’esempio basilare riguarda l’impostazione della media query unicamente sulla base della risoluzione dello schermo del dispositivo che visualizza la pagina web:

@media screen and (max-width: 768px) {
  p {
    font-size: 16px;
  }
}

Nel seguente esempio si vuole applicare delle regole CSS solo ai dispositivi mobili tenuti verticalmente (come normalmente viene tenuto in mano uno smartphone).

@media (max-width: 768px) and (orientation: portrait) {
  h1 {
    font-size: 32px;
  }
}

In questo estratto di codice scriviamo una media query che verifica due condizioni, in OR logico.

In altre parole, basta che almeno una delle due condizioni sia verificata affinché le regole CSS siano applicate.

@media (min-height: 680px), screen and (orientation: landscape) {
  div {
    background-color: yellow;
  }
}

La regola CSS relativa ai div viene applicata nei seguenti casi:

Quando il dispositivo che visualizza la pagina web ha un’altezza maggiore o uguale a 680px
Quando lo schermo del dispositivo è mantenuto orizzontalmente

CSS media queries: breakpoints

Quando si definiscono le regole CSS in funzione della risoluzione dello schermo, è importante sapere quali valori utilizzare per raggiungere una certa famiglia di dispositivi.

Un buon punto di partenza per scegliere i valori è costituito dall’elenco dei breakpoints di Bootstrap, riportati nell’immagine sopra.

Per approfondire questo tema, ti consiglio di leggere l’articolo Bootstrap CSS: cosa è e come utilizzarlo.

Approfondimenti

In questo blog sono presenti numerosi articoli riguardo al CSS e al Web Development.

Eccone alcuni:

Conclusioni

In questo articolo abbiamo visto cosa siano le CSS media queries, come utilizzarle, aiutandoci con alcuni esempi pratici.

Se volessi approfondire ulteriormente l’argomento, puoi consultare la pagina dedicata su MDN.

Seguimi su