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
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Evitare la script injection nelle GitHub Actions
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Usare il versioning con i controller di ASP.NET Core Web API
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Limitare le richieste lato server con l'interactive routing di Blazor 8
Gestire liste di tipi semplici con Entity Framework Core
Utilizzare politiche di resiliency con Azure Container App
Creazione di componenti personalizzati in React.js con Tailwind CSS
Creare un'applicazione React e configurare Tailwind CSS
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
I più letti di oggi
- Miglioramenti nelle performance di Angular 16
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- HTML5 con CSS e JavaScript
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)