Corsi on-line

Media query: uso combinato delle proprietà min-width e max-width

Sostanzialmente le media query consentono di utilizzare l’attributo “media” per indirizzare uno specifico foglio di stile verso certe tipologie di dispositivi (e i relativi display) escludendone altri; possiamo quindi affermare che una media query deve essere definita nel contesto dell’attributo media, ma come è possibile utilizzare quest’ultimo sulla base delle diverse definizioni di un’area di visualizzazione? In questo caso potrebbero risultarci particolarmente utili le proprietà min-width e max-width di CSS.

CSSIn pratica, potremmo stabilire dei limiti minimi e massimi sulla base delle dimensioni attese, ad esempio, per larghezze comprese tra i 200 e i 640 pixel si potrebbe definire un media come il seguente:

@media screen and (min-width: 200px) and (max-width: 640px) {
/* regole CSS */
}

Nello stesso modo, una visualizzazione di tipo panoramico (landscape) con un limite pari a 600 pixel potrebbe prevedere un media come quello proposto nel prossimo snippet:

@media screen and (min-width: 600px) and (orientation:landscape) {
/* regole CSS */
}

Infine, considerando un limite pari a 380 pixel per una visualizzazione di tipo ritratto (portrait), si potrebbe sfruttare la proprietà max-width come proposto di seguito:

@media screen and (max-width: 380px) and (orientation:portrait) {
/* regole CSS */
}

Come è facile intuire, il punto di forza di media e delle sue proprietà sta nelle combinazioni possibili. L’esempio pratico seguente rappresenta un’ulteriore conferma di tale caratteristica, infatti, date le seguenti regole di stile:

#divbox {
background: #adbe4c;
width: 350px;
padding: 20px;
border-radius: 10px;
margin 20px;
color: #4c74be;
}
@media screen and (min-width: 400px) and (max-width: 1024px) {
#divbox {
color: yellow;
}
}

e un semplice HTML come il seguente:

<div id="divbox">Vestibulum vehicula sapien a accumsan pulvinar. Pellentesque pretium ipsum erat, vitae vestibulum mauris auctor dignissim. Phasellus mollis purus a erat pharetra imperdiet. Curabitur volutpat nisl et nisi semper, vitae sodales odio accumsan.</div>

Avremo un divbox il cui testo, originariamente azzurro, diventerà giallo nel momento in cui la larghezza della finestra del browser sarà compresa tra 400 e 1024 pixel.

Post correlati
I più letti del mese
Tematiche