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
Ottimizzazione dei block template in Angular 17
Effettuare il binding di date in Blazor
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Utilizzare i primary constructor di C# per inizializzare le proprietà
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Miglioramenti nelle performance di Angular 16
Miglioramenti nell'accessibilità con Angular CDK
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Configurare policy CORS in Azure Container Apps
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Effettuare delete massive con Entity Framework Core 7
Sfruttare lo stream rendering per le pagine statiche di Blazor 8