Corso di CSS / Media query CSS e breakpoint basati sul contenuto

Le media query applicano CSS quando sono soddisfatte determinate condizioni ambientali, come una soglia di larghezza del viewport. Scegli un breakpoint dove il contenuto effettivo necessita di un layout diverso e tieni conto sia della larghezza dei componenti sia dello spazio circostante.

Combina stili di base e stili condizionali

Le regole al di fuori delle media query forniscono la base. Quando una condizione corrisponde, le sue dichiarazioni si uniscono alla cascata; non eliminano le dichiarazioni di base non correlate. Prima di aggiungere un breakpoint, verifica se una dimensione fluida può ospitare naturalmente il contenuto. Vedi Layout CSS fluidi con min(), max-width e clamp().

.cards { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 33rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

Questo frammento a 33rem illustra la sintassi. Nel progetto completo più sotto il breakpoint sarà 35rem, perché include anche il padding del contenitore. Qui abbiamo usato lo stesso selettore e scritto prima lo stile di base, quindi la dichiarazione condizionale successiva sovrascrive quella proprietà. Non dovresti generalizzare che “il codice sottostante vincerà sempre” in tutti i casi. Confronta l’ordine delle dichiarazioni quando origine, importanza, layer e specificità sono uguali. Se le condizioni sono vere ma non c’è alcun cambiamento, verifica se appare una riga barrata in altre regole negli strumenti per sviluppatori.

Calcolare i punti di interruzione dai requisiti delle schede

Per prima cosa, controlla a che larghezza una singola scheda inizia a diventare difficile da leggere. In pratica, l'obiettivo minimo di larghezza, includendo il bordo e il padding della scheda, è fissato a 16rem. Questo non è un valore standard che si adatta a ogni sito, ma è un requisito di design per questo esempio. Dovresti provare a includere un titolo e una descrizione lunghi e modificarli per adattarli al font e al contenuto effettivi.

La larghezza del contenuto richiesta per due colonne è di 33rem, che corrisponde a 16rem×2 più 1rem di spazio tra le colonne. Se il padding a sinistra e a destra del testo è di 1rem ciascuno, la larghezza viewport richiesta è di 35rem. Pertanto, nel progetto completo di questa lezione, inizieremo entrambe le colonne a 35rem. Tre colonne sono 16rem×3 + spazio 1rem×2 + padding sinistro e destro del contenitore 2rem. Sono necessari 52rem.

Il motivo per cui non aggiungiamo lo spazio all'interno della scheda nel calcolo della tabella è perché lo abbiamo già incluso nel nostro obiettivo di larghezza minima di 16rem. Al contrario, se il corpo principale divide la larghezza dalla barra laterale, è difficile garantire lo spazio per la scheda solo con la viewport. In tal caso, considera di ricalcolare le condizioni del layout esterno o di determinare il layout interno della parte utilizzando le Container query CSS per componenti riutilizzabili.

Comprendere le unità rem e le soglie inclusive

min-width è valido quando è uguale o maggiore della larghezza specificata, e max-width è valido quando è uguale o minore della larghezza specificata. Se la tua dimensione iniziale del font è 16px, 35rem corrispondono a 560px e 52rem corrispondono a 832px. Non descriviamo sempre rem come un valore px fisso, poiché il valore convertito può variare a seconda delle impostazioni iniziali del font dell'utente o del browser.

La lunghezza relativa nelle media query utilizza il valore iniziale, non la dimensione del font sovrascritta dal CSS della pagina. Ad esempio, aggiungere html { font-size: 32px; } al CSS non trasforma automaticamente la condizione di 35rem in una condizione di 1120px. Bisogna fare una distinzione tra le modifiche nella dimensione rem del testo e le modifiche nelle condizioni delle media query. Questo principio è descritto nella specifica dei CSS Media Query basati sulle unità.

/* Both conditions are true even at 560px. */
@media (max-width: 560px) { /* narrow screen rule */ }
@media (min-width: 560px) { /* wide screen rule */ }

Come mostrato sopra, le condizioni min e max con lo stesso confine si sovrappongono nei punti corrispondenti. Puoi ridurre questo problema aggiungendo le condizioni di larghezza predefinite e minime a tappe. Le condizioni a due colonne e a tre colonne sono valide anche su schermi grandi, ma usare lo stesso selettore e le stesse proprietà dell'esempio completo e scrivere la regola a tre colonne successivamente produce l'effetto desiderato.

Espandi da una a due e tre colonne

Salvalo come file media-breakpoint.html e aprilo nel tuo browser. Non sono necessari file esterni. Ho inserito tre schede con titoli e link, e ho anche aggiunto testo lungo per rendere leggibile il contenuto anche se fosse un po' lungo.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>media-breakpoint.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.content { width: min(100%, 70rem); margin-inline: auto; padding: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; background: #eef5fa; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card a { display: inline-block; padding: .5rem; }
@media (min-width: 35rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="content"><h1>Choose breakpoints based on the content</h1>
<p>The target minimum card width is 16rem, including the border and padding.</p>
<div class="cards">
<article class="card"><h2>Files and screen settings to prepare</h2><p>The description and link should follow naturally even when the heading wraps onto several lines.</p><a href="#result">Read the first description</a></article>
<article class="card"><h2>Options for narrow screens</h2><p>Reduce the number of columns to make room instead of simply shrinking the text.</p><a href="#result">Read the second description</a></article>
<article class="card"><h2>English identifier</h2><p>ARTICLE_REFERENCE_WITHOUT_SPACES_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><a href="#result">Read the third description</a></article>
</div><p id="result">Check that links and keyboard focus remain visible on the screen.</p></main>
</body>
</html>

Disattivare la larghezza minima per minmax(0, 1fr) e le schede evita che le colonne si estendano oltre lo schermo a causa di contenuti lunghi. Tuttavia, lo scopo di questo esempio è ridurre il numero di colonne piuttosto che ridurre soltanto il testo per farlo entrare. Alla larghezza massima del corpo di 70rem, le colonne non continuano a espandersi all'infinito, ma tre schede dividono lo spazio rimanente.

Testa immediatamente attorno a ciascun breakpoint

1. Confronta 559px, 560px e 561px in un ambiente con una dimensione del font iniziale di 16px. 559px dovrebbe avere 1 colonna, 560px dovrebbe avere 2 colonne.
2. Confronta 831px, 832px e 833px. 831px dovrebbe avere 2 colonne, 832px dovrebbe avere 3 colonne. Assicurati che la larghezza della scheda sia almeno di 16rem anche quando raggiungi l'esatto punto di giunzione.
3. Modifica soltanto il breakpoint delle due colonne da 35rem a 30rem. A 480px, osserva se la larghezza della scheda diventa più piccola del previsto e il numero di righe del titolo aumenta, poi ripristina a 35rem.
4. Registra separatamente la prova con un font predefinito del browser più grande e quella in cui modifichi soltanto font-size di html tramite CSS. Non considerarle lo stesso esperimento, ma verifica attentamente la larghezza e il posizionamento delle schede in ogni condizione.

Le media query possono testare l'orientamento, le capacità di input e una preferenza per il movimento ridotto, così come la larghezza. Uno schermo stretto non significa necessariamente un dispositivo touch, e uno schermo ampio non garantisce un mouse. Completa prima il layout basato sulla larghezza, poi aggiungi altre condizioni dove la funzionalità le richiede. La guida MDN all'uso delle media query spiega la loro sintassi e le condizioni dell'ambiente.