Le media query sono funzionalità native del CSS che permettono, in base a determinate condizioni, di sovrascrivere una parte del CSS stesso. Sono anche, sfortunatamente, famose per la loro difficoltà di comprensione: a volte la dichiarazione potrebbe risultare così verbosa da essere di difficile interpretazione. In seguito riportiamo due esempi, il primo molto intuitivo, il secondo, utilizzando come metodo di confronto la min-width e max-width richiede più attenzione per comprenderne il campo di azione.
@media (max-width: 100em) { ... } @media (min-width: 100em) and (max-width: 200em) { ... }
Va detto che, anche nel secondo caso, la complessità di interpretazione è bassa, ma ci è utile per capire quanto, attraverso delle funzionalità di Livello 4, possiamo semplificarne la comprensione.
Il Livello 4 è un insieme di funzionalità, successivo al Livello 3. Nel Livello 3 sono inserite tutte le specifiche riguardanti media query che interagiscono con valori di width, height, orientation, resolution; con il Livello 4 vediamo l'introduzione di operatori come and, or, not e operatori di range <, >.
Sono proprio questi ultimi a permetterci di riscrivere il codice mostrato poco fa in una modalità molto più diretta, meno verbosa e comprensibile.
@media (width <= 100em) { ... } @media (100em <= width <= 200em ) { ... }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire il fallimento di uno step in un workflow di GitHub
Controllare se un branch esiste nel remote con un workflow di GitHub
Organizzare il codice JavaScript utilizzando i moduli
Usare Docusaurus per creare un sito di documentazione
Gestire i file esterni in una PWA
Le novità di Entity Framework (Core) 7
Effettuare un loop di una GitHub Action
Ottenere il riferimento alla finestra che ha aperto un'altra finestra con HTML5 e JavaScript
Gestire il breaking change di Entity Framework Core 7 con tabelle che usano identity e trigger
Chiamare un endpoint ASP.NET Core protetto da Certificate Authentication
Linting di un Dockerfile con un workflow di GitHub
3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
I più letti di oggi
- Linting di un Dockerfile con un workflow di GitHub
- Sfruttare la local cache del browser tramite gli ETag in #aspnetcore https://aspit.co/cfc di @crad77 #webapi #aspnetmvc #blazor #cache
- Monitorare i server on-premises con Azure Arc
- 3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2