Le Media query sono un insieme di regole CSS che permettono di modificare l'aspetto sulla base della dimensione dello schermo, orientamento, risoluzione o altri parametri. Con le specifiche di livello 4 sono stati introdotti nuovi metodi per renderne più comprensibile la stesura.
Se prendiamo in esame il codice seguente, esso applicherà la regola fintanto che la dimensione sarà minore di 300px.
@media (max-width: 300px) { /* ? */ }
Possiamo così riscriverla in:
@media (width <= 300px) { /* ? */ }
Allo stesso modo, regole più complesse possono essere convertite aumentandone la leggibilità
@media (min-width: 300px) and (max-width: 500px) { /* ? */ } @media (300px <= width <= 500px) { /* ? */ }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Effettuare test di carico con Azure Load Testing
Utilizzare Front Door come CDN di contenuti statici
Utilizzare il metodo reduce in JavaScript
Usare Docusaurus per creare un sito di documentazione
Specificare il numero di parentesi graffe nella string interpolation in combinazione con i string literal in C#
Creare applicazioni distribuite con Azure Container Apps e Dapr
Dependency Injection e custom validator in Blazor con .NET 7.0
Utilizzare la parola chiave file nel codice C#
Usare Azure Application Gateway come reverse proxy per ASP.NET Core
Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
Utilizzare l'attributo autofill del CSS
Impostare un default custom per i metodi LINQ che tornano il valore di default
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