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
Usare le collection expression per inizializzare una lista di oggetti in C#
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Creazione di componenti personalizzati in React.js con Tailwind CSS
Definire lo stile CSS in base alle dimensioni del container
Generare file per il download da Blazor WebAssembly
Utilizzare i nuovi piani dedicati di Azure Container Apps
Eseguire una GroupBy per entity in Entity Framework
Eseguire attività pianificate con Azure Container Jobs
Le novità di Angular: i miglioramenti alla CLI
.NET Conference Italia 2023
Routing statico e PreRendering in una Blazor Web App
Utilizzare flat e flatMap per appiattire array innestati in array