Come impostare intervalli di lunghezza per le media query in CSS

Articolo originale: How to Set Width Ranges for Your CSS Media Queries

Una media query è una funzionalità del CSS. Permette di creare e implementare layout che si adattano alle caratteristiche del dispositivo che si sta utilizzando. L'altezza e la lunghezza di una pagina sono alcune di queste caratteristiche.

In questa breve guida, vedremo come si possono impostare diverse proprietà di lunghezza nella regola di una media query. Per il momento, vediamo prima le cose fondamentali.

Come funzionano le media query in CSS

Ora che abbiamo un'idea di base di cos'è una media query, diamo un'occhiata a come funziona davvero questa particolare funzionalità del CSS.

Ecco una semplice media query:

@media only screen and (max-width: 576px) {
    // stili da applicare
}

@media only screen and (min-width: 576px) {
    // stili da applicare
}

Ciò significa che gli stili scritti all'interno delle media query qui sopra funzioneranno o verranno applicati solo con le proprietà di lunghezza specificate.

Letteralmente, stiamo chiedendo al CSS che per questa lunghezza particolare (cioè, la proprietà max-width di 576px) vengano applicati gli stili che scriveremo qui, specifici solo per questa lunghezza, a partire dalla lunghezza iniziale di 0px.

Le proprietà max-width e min-width

Ci sono due cose che bisogna tener presenti quando creiamo media query per diverse dimensioni di schermi: le proprietà max-width e min-width.

Quando a una media query viene passata la proprietà max-width, CSS la interpreta come una lunghezza a partire da zero – cioè come se non fosse stata impostata una proprietà di lunghezza minima. Ci arriveremo tra poco.

Una volta che alla proprietà max-width viene assegnato un valore, tutti gli stili all'interno di quella particolare media query verranno applicati a qualsiasi dispositivo le cui dimensioni dello schermo vanno da 0px alla lunghezza massima specificata.

La proprietà min-width, d'altra parte, prende il valore iniziale che gli è stato assegnato e applica gli stili all'interno della regola media fino alla successiva max-width presente. Supponiamo, ad esempio:

@media only screen and (min-width: 576px) {
    // applica gli stili dalla lunghezza minima di 
    // 576px (dispositivi con schermo di grandezza media)
}

Gli stili che verranno scritti nella media query qui sopra saranno applicati solo ai dispositivi con lunghezza dello schermo a partire dalla lunghezza minima specificata.

Come impostare l'intervallo di lunghezza con una media query

Il metodo che abbiamo appena visto per creare le media query applicando solo una proprietà width risolve solo un problema.

Impostando un "intervallo di lunghezza", si ha un certo grado di flessibilità nella creazione di layout che si adattano a schermi di tutte le dimensioni.

Per impostare un "intervallo di lunghezza" preciso si crea una media query come abbiamo visto in precedenza. L'unica differenza è l'aggiunta di più espressioni media (cioè, dimensioni di schermi).

Diamo un'occhiata:

@media only screen and (min-width: 360px) and (max-width: 768px) {
    // stili da applicare in questo intervallo di dimensioni
}

La media query precedente verrà applicata solo quando l'espressione definita in alto è valida (cioè per gli schermi di dispositivi mobili per cui stiamo scrivendo uno stile).

Questa media query prende il primo valore di lunghezza come valore iniziale e il secondo come valore finale.

Ricordate la differenza tra le proprietà max-width e min-width? Stiamo semplicemente dicendo al browser di applicare gli stili CSS che scriviamo all'interno di questa regola ai dispositivi mobili le cui dimensioni di schermo vanno da 360px a 768px.

In parole semplici, stiamo creando layout che si adatteranno anche a schermi di piccole e medie dimensioni, come tablet o dispositivi mobili.

Si possono consultare i punti di passaggio tra le varie dimensioni degli schermi che sono disponibili nella documentazione di Bootstrap. A partire da questi, si possono impostare gli intervalli che si preferiscono.

Proviamo le media query con flexbox

Abbiamo visto come creare una media query di base che considera espressioni con diverse dimensioni di schermo. E abbiamo visto la differenza tra le proprietà max-width e min-width e come applicarle.

In questa sezione, vedremo come creare un semplice layout il cui aspetto cambia in diversi punti di passaggio (breakpoint, corrispondenti a specifiche dimensioni di schermo). Iniziamo creando la pagina HTML che contiene il layout.

<!DOCTYPE html>
<html lang="it">
  <head>
    <title>Esempio della Media Query</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="boxes box1">
        <h1>Primo Box</h1>
        <p>
        Informazioni del primo box
        </p>
      </div>
      <div class="boxes box2">
        <h1>Secondo Box</h1>
        <p>
          Informazioni del secondo box
        </p>
      </div>
  </body>
</html>

Il codice qui sopra mostrerà due box con le loro rispettive informazioni, quando gli stili vengono applicati.

.container {
  display: flex;
  flex-wrap: wrap;
  width: 980px;
  margin: 0 auto;
  margin-top: 40px;
}

@media only screen and (min-width: 320px) and (max-width: 576px) {
  .container {
    width: 100%;
    padding-left: 23px;
    flex-direction: column-reverse;
  }
  .boxes {
    width: 100%;
  }
}

Osservando il file CSS, possiamo notare che la media query ha una lunghezza minima di 320px e una lunghezza massima di 576px. Questo significa che tutti gli stili scritti all'interno di questa regola si applicano solo ai dispositivi con dimensioni di schermo piccole e molto piccole.

Anche il layout dei box cambia anche in questo particolare intervallo di lunghezza. Questo è causato dal selettore .container, la cui proprietà flex-direction cambia da row a column-reverse.

Si possono utilizzare anche altri valori per la proprietà flex-direction. Qui si possono consultare i valori disponibili.

Conclusione

Se non si imposta un intervallo di lunghezza, gli stili CSS dell'esempio precedente verranno applicati a tutti i dispositivi con una dimensione minima di 576px.

Quando si imposta un intervallo di dimensioni, si ha un miglior controllo. Si possono specificare quali stili dovrebbero essere applicati a un dispositivo con una particolare dimensione dello schermo, ottenendo così un'applicazione più flessibile.

Grazie per aver letto questo articolo. Condividilo se ti è stato utile per capire perché si dovrebbero impostare intervalli di lunghezza nella creazione di media query.