Punti di interruzione nelle query multimediali CSS | Spiegato

Le query multimediali CSS sono indicate come query che consentono di modificare l'aspetto della struttura web a seconda del tipo di dispositivo utilizzando il sito Web come desktop, telefoni, laptop, ecc. Queste query sono specificate utilizzando la regola @media e devono essere definite in alcuni punti in cui è richiesta la modifica nel layout web. Questi punti sono chiamati punti di interruzione di cui abbiamo discusso in dettaglio di seguito.

Introduzione ai punti di interruzione CSS

I punti di interruzione in CSS sono indicati come quei punti su cui il layout di un sito Web si altera alla dimensione dello schermo del tipo di dispositivo. Questi punti sono anche considerati punti di interruzione delle query sui media perché questi sono specificati nelle query multimediali.

Ora che abbiamo imparato quali sono i punti di interruzione della query dei media, esploriamo come impostarli.

Impostazione dei punti di interruzione CSS

Non esiste uno standard fornito per impostare un punto di interruzione, pertanto, i punti di interruzione definiti in varie strutture Web potrebbero differire. Tuttavia, ci sono stati forniti due tipi di approcci per impostare un punto di interruzione.

1. Breakpoint di tipo dispositivo

2. Breakpoint di tipo contenuto

Vediamoli in dettaglio.

Breakpoint di tipo dispositivo

Come suggerisce il nome, i punti di interruzione del tipo di dispositivo riguardano la procedura di specifica dei punti di interruzione in base a diversi tipi di dispositivo. Anche se questo potrebbe non essere considerato un buon approccio perché la tecnologia si sta evolvendo di minuto in minuto e ogni tanto emergono nuovi dispositivi. Pertanto, ogni volta che un nuovo dispositivo emerge, gli sviluppatori devono specificare un punto di interruzione per quel particolare dispositivo che può essere frenetico.

Inoltre, l'elenco delle query multimediali è enorme quando si definisce i punti di interruzione in base al tipo di dispositivo. Diversi dispositivi sulla base dei quali puoi decidere i punti di interruzione sono i seguenti.

1. Desktop

2. Compresse

3. Cellulari

Qui abbiamo presentato alcuni esempi di breakpoint basati sui dispositivi.

Per iPhone 13

@Media Only Screen e (Whiidth del dispositivo: 1170px) e (Dispositivo-Height: 2532PX)

..

Per Samsung Galaxy S9+

@Media Only Screen e (Whiidth Device: 1440px) e (Dispositivo-Height: 2960px)

..

Invece di specificare i punti di interruzione di ciascun dispositivo separatamente, puoi anche definire i punti di interruzione per i gruppi di dispositivi comuni.

/ * Per dispositivi molto piccoli (486px e sotto) */
@Media Only Screen e (Max-Width: 486px) …
/ * Per piccoli dispositivi (596px e su) */
@Media Only Screen e (Min Width: 596px) …
/ * Per dispositivi medi (720px e su) */
@Media Only Screen e (Min Width: 720px) …
/ * Per dispositivi di grandi dimensioni (995px e su) */
@Media Only Screen e (Min Width: 995px) …
/ * Per dispositivi extra grandi (1100px e su) */
@Media Only Screen e (Min Width: 1100px) …

Breakpoint di tipo contenuto

Specifica dei punti di interruzione in base al tipo di contenuto visualizzato dal sito Web, vengono utilizzati i punti di interruzione del tipo di contenuto. Questo è considerato un buon approccio perché questo approccio richiede di specificare i punti di interruzione solo in quei punti in cui il contenuto necessita di qualsiasi tipo di rialdazione. Usando questo approccio il numero di query dei media diventa sempre più gestibile.

Alcuni punti di interruzione del tipo di contenuto di esempio sono forniti di seguito.

Per la larghezza dello schermo 720px e più ampia.

@media solo schermo e (larghezza min: 720px)

..

Per la risoluzione dello schermo tra 480px e 720px.

@Media Only Schermate e (larghezza min: 480px) e (larghezza massima: 720px)

..

Usando i punti di interruzione MIN e MAX WIDTH nei luoghi giusti

Negli esempi di cui sopra, devi aver notato che abbiamo usato due tipi di punti di interruzione che sono larghe e larghezza massima. Una domanda deve sorgere nella tua mente quale usare quando.

La risposta a questa domanda è semplice: se stai sviluppando il tuo sito Web per dispositivi più piccoli prima, impostare i punti di interruzione CSS predefiniti con larghezza minima e regolare di conseguenza per dispositivi più grandi. Nel frattempo, il contrario è il caso di dispositivi più grandi. Se stai sviluppando prima per dispositivi più grandi, usa la larghezza massima e poi sintonizzati per dispositivi più piccoli di conseguenza.

Tipi di punti di interruzione utilizzati

Quando il mercato del tipo di dispositivo non era così enorme come lo è ora, la larghezza dello schermo per ogni dispositivo è stata specificata separatamente, tuttavia, questo approccio non è consigliato ora in quanto esiste una vasta gamma di tipi di dispositivi nel mercato.

L'approccio che si preferisce è che dovresti essere consapevole del tipo di web design, del pubblico di destinazione e del tipo di dispositivi che il tuo pubblico utilizza principalmente e la larghezza dello schermo di quei dispositivi. Qui abbiamo arruolato alcuni punti di interruzione frequenti usati.

1. Per dispositivi mobili: da 320px a 480px

2. Per tablet e iPad: da 481px a 768px

3. Per laptop: 769px a 1024px

4. Per desktop: da 1025px a 1200px

Conclusione

I punti di interruzione in CSS sono indicati come quei punti su cui il layout di un sito Web si altera alla dimensione dello schermo del tipo di dispositivo. Esistono due tipi di punti di interruzione, uno specificato sulla base del tipo di dispositivo e l'altro sono definiti sulla base del tipo di contenuto. L'approccio che utilizza il tipo di contenuto è preferito sul tipo di dispositivo in quanto esiste una vasta gamma di dispositivi disponibili sul mercato e diventa difficile specificare i punti di interruzione per ciascun dispositivo individualmente. Sebbene, ci siano alcuni punti di interruzione comuni usati per vari dispositivi di cui abbiamo discusso in dettaglio in questo articolo insieme ad altri dettagli sui punti di interruzione.