Come utilizzare i punti di interruzione CSS per creare design reattivi

Il successo di un sito web dipende molto dall'esperienza dell'utente. Al giorno d'oggi, gli utenti accedono a un sito Web da molti dispositivi diversi e fornire un'esperienza utente uguale su ciascun dispositivo può essere una sfida. È qui che i punti di interruzione CSS possono tornare utili.

I punti di interruzione CSS possono essere estremamente utili per la creazione di siti reattivi che offrono un'esperienza utente eccezionale su qualsiasi dispositivo, ma rimangono anche uno degli aspetti più confusi del web design, soprattutto per i nuovi sviluppatori.

Iniziamo!

Che cos'è un punto di interruzione CSS?

I punti di interruzione CSS sono punti in cui il contenuto del sito Web risponde in base alla larghezza del dispositivo, consentendo di mostrare all'utente il miglior layout possibile.

I punti di interruzione CSS sono anche chiamati punti di interruzione delle query multimediali, poiché vengono utilizzati con le query multimediali.

In questo esempio, puoi vedere come il layout si adatta alle dimensioni dello schermo. Il layout a grande risoluzione ha un'intestazione e un layout a due colonne, ma in un dispositivo piccolo si trasforma in un layout a una colonna.

Come impostare i punti di interruzione CSS

La parte difficile è decidere i breakpoint stessi. Non ci sono modelli standard e framework diversi usano punti di interruzione diversi.

Quindi quale approccio dovresti adottare per i tuoi breakpoint?

Ci sono due probabili approcci da seguire:

• Punti di interruzione in base al dispositivo
• Punti di interruzione basati sul contenuto

Punti di interruzione CSS in base al dispositivo

Decidere punti di interruzione in base a dispositivi diversi sembra una buona idea, ma in realtà non è sempre l'approccio migliore. Abbiamo già abbastanza dispositivi di cui preoccuparci e quando ne esce uno nuovo con una larghezza diversa, tornare al tuo CSS e aggiungere di nuovo un nuovo punto di interruzione richiede molto tempo.

Tuttavia, è ancora un'opzione praticabile, poiché potresti scoprire che funziona bene per te. Ecco un esempio di punti di interruzione specifici del dispositivo:

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

Con questo approccio, finirai per avere un enorme elenco di query multimediali.

Punti di interruzione CSS basati sul contenuto

L'opzione ideale per decidere i punti di interruzione si basa sul contenuto del tuo sito. Questo metodo ti consente di aggiungere semplicemente punti di interruzione in cui il tuo contenuto necessita di una regolazione del layout. Ciò renderà la tua query multimediale molto più semplice e gestibile.

Questo punto di interruzione significa che il CSS verrà applicato quando la larghezza del dispositivo è 768px e oltre.

 [css]@media only screen (min-width: 768px){ ... }[/css]

Puoi anche impostare un intervallo con punti di interruzione, quindi il CSS si applicherà solo entro questi limiti.

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

Quando utilizzare i punti di interruzione CSS di larghezza minima o massima

Puoi impostare i tuoi punti di interruzione in diversi modi utilizzando min-width , max-width o anche combinando entrambi. Ma la domanda è: quando dovresti usarli?

Per rispondere in modo semplice, se stai progettando il tuo layout con un approccio mobile-first, usa i punti di interruzione di larghezza minima e fatti strada verso l'alto.

Imposta gli stili predefiniti per il dispositivo piccolo e regola di conseguenza per i dispositivi più grandi.

Allo stesso modo, se stai progettando prima per dispositivi più grandi, imposta il CSS predefinito come faresti normalmente e regola per dispositivi più piccoli con l'approccio della larghezza massima.

Utilizzo dei punti di interruzione CSS con SASS

Se stai utilizzando un preprocessore come SASS o SCSS, puoi scrivere punti di interruzione molto più intelligenti. Mixin ti consente di creare punti di interruzione più dichiarativi da ricordare, in questo modo:

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

Quando si lavora in gruppo, è molto più facile ricordare "tablet-up" rispetto a 768px o 48em. Chiunque può capire questo punto di interruzione; è per tablet e dimensioni dello schermo superiori.

Quali punti di interruzione CSS utilizzare

Abbiamo visto come utilizzare i punti di interruzione e quando usarli, ma la domanda rimane ancora: quali punti di interruzione specifici dovresti usare?

Analizziamo un po' le cose. Devi scegliere come target dimensioni desktop, tablet e solo dispositivi mobili. Puoi controllare alcuni framework popolari per avere un'idea di quale approccio seguire.

Bootstrap ha punti di interruzione a 576px, 768px, 992px e 1200px. La fondazione ha principalmente punti di interruzione a 40 e 64 em. In Bulma, i punti di interruzione sono impostati a 768px, 769px, 1024px, 1216px e 1408px.

Ognuno ha diversi punti di interruzione, ma una cosa che hanno in comune è un approccio mobile-first. Puoi utilizzare uno di questi punti di interruzione come punto di partenza o crearne uno tuo, in questo modo:

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

Ti viene l'idea!

Avvolgendo

Per riassumere, i punti di interruzione CSS sono un ottimo modo per ristrutturare il layout per fornire la migliore esperienza utente su diversi dispositivi.

Cerca sempre di creare punti di interruzione in base ai tuoi contenuti, non ai dispositivi. Rompili in una larghezza logica anziché in una larghezza casuale e mantienili su un numero gestibile, quindi la modifica rimane semplice e chiara.

Quali punti di interruzione CSS usi per i tuoi layout? Fatecelo sapere nella sezione commenti qui sotto.

Qual è il prossimo?

Crea e testa gratuitamente i tuoi blocchi Gutenberg personalizzati con Local!

Scopri di più su Local qui!

Per ulteriori consigli sulla creazione di siti reattivi, dai un'occhiata a questi articoli!

• Come rendere il tuo sito WordPress ottimizzato per i dispositivi mobili
• Come creare un menu di navigazione reattivo in WordPress
• 7 consigli sulle migliori pratiche per un web design reattivo