CSS3 introduce una serie di nuove specifiche dedicate a sfruttare in maniera avanzata gli stili, denominate Media Queries. Possiamo combinare delle istruzioni particolari in base alla risoluzione del browser o alla disponibilità o meno di una particolare feature.
Ad esempio, possiamo specificare un CSS a uso e consumo di un browser il cui schermo abbia una risoluzione minore di 400px, utilizzando l'esempio che segue:
<link rel="stylesheet" href="style.css" type="text/css" media="screen and (min-device-width: 400px)" />
In generale, queste istruzioni possono poi essere applicate anche direttamente nel CSS, come segue:
.tablet, .largeScreen {display:none;} @media (min-width: 768px) and (max-width: 1024px) { /* tablet */ .tablet {display:block!important;} } @media (min-width: 1024px) { /* schermo largo */ .largeScreen {display:block!important;} }
L'effetto di queste istruzioni è che, ridimensionando il browser, i due elementi saranno visualizzati finchè le dimensioni della finestra resteranno nei range specificati.
Attraverso le Media Queries possiamo controllare orientamento, aspect-ratio e dimensione dello schermo:
@media (min-device-width:400px) { /* agisce sulla larghezza minima dello schermo */ } @media (min-device-height:400px) { /* agisce sull'altezza minima dello schermo */ } @media (aspect-ratio: 4/3) { /* solo se lo schermo è 4/3 */ } @media (device-aspect-ratio: 16/9) { /* solo se lo schermo è 16/9 */ } @media (orientation: portrait) { /* solo con orientamento portrait */ }
Le istruzioni possono essere combinate, come nel primo esempio, usando la keyword and.
Le specifiche complete dei CSS3 Media Queries sono disponibili su http://www.w3.org/TR/css3-mediaqueries/
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestione degli eventi nei Web component HTML
Integrare SQL Server in un progetto .NET Aspire
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Combinare Container Queries e Media Queries
Utilizzare i variable font nel CSS
Ridurre il reflow cambiando il CSS
Ordine e importanza per @layer in CSS
Path addizionali per gli asset in ASP.NET Core MVC
Il nuovo controllo Range di Blazor 9
Applicare un filtro per recuperare alcune issue di GitHub
Introduzione alle Container Queries
Testare il failover sulle region in Azure Storage
I più letti di oggi
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- 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!
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi