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
Creare una libreria CSS universale: Immagini
Selettore CSS :has() e i suoi casi d'uso avanzati
Utilizzare WhenEach per processare i risultati di una lista di task
Introduzione ai web component HTML
Path addizionali per gli asset in ASP.NET Core MVC
Documentare i servizi REST con Swagger e OpenAPI con .NET 9
Ottimizzare le pull con Artifact Cache di Azure Container Registry
Ordine e importanza per @layer in CSS
Utilizzare l nesting nativo dei CSS
Utilizzare DeepSeek R1 con Azure AI
Utilizzare Copilot con Azure Cosmos DB
Collegare applicazioni server e client con .NET Aspire
I più letti di oggi
- Eseguire query in contemporanea con EF
- Fissare una versione dell'agent nelle pipeline di Azure DevOps
- .NET Aspire per applicazioni distribuite
- Utilizzare Locust con Azure Load Testing
- Autenticazione di git tramite Microsoft Entra ID in Azure DevOps
- Repaint, Reflow e Compositing: Come Funziona il Rendering nel Browser
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!