Width Min Width e Max Width nelle query multimediali | Spiegato

Un sito Web reattivo viene definito un sito Web dinamico che altera la sua struttura in base al dispositivo su cui viene visualizzato. Può cambiare il suo comportamento a seconda della larghezza dello schermo, della risoluzione dello schermo, dell'orientamento, ecc. Del dispositivo. Ora, al fine di creare un tale sito Web, gli sviluppatori utilizzano le query dei media. Qui in questo articolo, le materie discusse sono le seguenti.

1. Query media
2. Breakpoint CSS
3. Larghezza min
4. Larghezza massima
5. Combinando entrambi
6. Quando usare quale: larghezza minim o larghezza massima

Query media

Le query dei media sono state introdotte nella versione 3 CSS che consente ai suoi utenti di creare siti Web reattivi attraverso l'uso della regola @media. Questa regola richiede di indicare il tipo di media come stampa, schermo, discorso o tutto insieme ad alcune espressioni logiche che specificano alcune caratteristiche dei media tale larghezza, risoluzione, densità, ecc.

Queste domande consentono sostanzialmente l'alterazione del layout Web a seconda del tipo di dispositivo come desktop, laptop, mobile, ecc. Qui ti abbiamo mostrato come definire una query multimediale.

Sintassi

Schermata @media e (larghezza min: 420px) e (larghezza massima: 650px)
@regola
tipo di supporto
Funzione multimediale
Funzione multimediale
operatore
operatore

Una query multimediale inizia sempre con la regola @media e richiede di specificare il tipo di media su cui deve essere applicata la query. Quindi è necessario dichiarare il tipo di media sullo schermo e utilizzare operatori come "e" combinare funzionalità dei media come la larghezza minima o la larghezza massima.

Le query multimediali sono specificate in alcuni punti che vengono indicati come punti di interruzione delle query multimediali. Vedi la sezione imminente per impararli in dettaglio.

Breakpoint CSS

I punti di interruzione in CSS sono indicati come quei punti su cui la struttura di un sito Web cambia corrispondente alla dimensione dello schermo del tipo di dispositivo. I punti di interruzione sono decisi in base al tipo di dispositivo o al tipo di contenuto. Alcuni punti di interruzione comuni sono i seguenti.

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

Mentre leggi le spiegazioni sopra, devi aver notato che abbiamo usato due funzionalità dei media-Width e Max Width. Ti stai chiedendo cosa siano questi e quando usarli. Di seguito ti abbiamo fornito tutti i dettagli essenziali.

Larghezza min

La funzione multimediale di larghezza minima specifica la larghezza minima di un dispositivo specifico. Ad esempio, nella sezione sopra, abbiamo arruolato alcune larghezze dello schermo sulla base del tipo di dispositivo come la larghezza minima dello schermo dei dispositivi mobili è 320px.

Esempio

@media Screen e (Min Width: 600px)
P
Font-size: 16px;

Nel codice sopra, abbiamo specificato che quando la larghezza minima dello schermo è 600px o più larga, la dimensione del carattere del paragrafo cambierà in 16px. Quindi qualsiasi dispositivo con questa larghezza della schermata visualizzerà il testo del paragrafo nella dimensione del carattere specificato.

Larghezza massima

La funzionalità dei media di larghezza massima indica la larghezza massima di un particolare dispositivo. Ad esempio, la larghezza massima dello schermo dei dispositivi mobili è 480px. Consultare l'esempio seguente per capirlo in modo migliore.

Esempio

@media screen e (massimo-larghezza: 700px)
P
Font-size: 25px;

Il codice sopra afferma che quando la larghezza massima dello schermo è 700px o minore, la dimensione del carattere del paragrafo cambierà a 25px. Qualsiasi dispositivo che resa questa larghezza della schermata visualizzerà il testo del paragrafo nella dimensione del carattere specificato.

Combinando entrambi

Puoi anche utilizzare entrambe le funzionalità dei media combinandole con l'operatore "e".

Esempio

P
Font in stile: audace;

@media Screen e (Min-Width: 600px) e (Max-Width: 700px)
P
Font in stile: corsivo;

Il codice sopra specifica che se la larghezza dello schermo si trova tra 600px a 700px, lo stile del carattere sarà in corsivo altrimenti lo stile del carattere sarà audace.

Quando usare quale: larghezza minim o larghezza massima

Se stai progettando prima il tuo sito Web per dispositivi più piccoli, impostare i punti di interruzione CSS predefiniti con larghezza minim e regolare di conseguenza per dispositivi più grandi.

Nel frattempo, se stai progettando prima per dispositivi più grandi, usa la larghezza massima e poi sintonizzati per dispositivi più piccoli di conseguenza.

Conclusione

La larghezza minima e la larghezza massima sono funzionalità dei media che corrispondono a un determinato tipo di media che è stato specificato nella query multimediale. La larghezza minima specifica la larghezza minima dello schermo di un dispositivo specifico, nel frattempo, la funzionalità multimediale di larghezza massima indica la larghezza massima dello schermo di un dispositivo specifico. Se stai progettando prima il tuo sito Web per dispositivi più piccoli, imposta i tuoi punti di interruzione iniziali con la larghezza minima, mentre, se stai progettando per dispositivi più grandi, usa prima la larghezza massima. Questo post discute in dettaglio le funzionalità dei media di larghezza minima e di larghezza massima insieme a esempi pertinenti.