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
Q# for Quantum Programming, an "only for the brave" session
Health monitoring con Azure Container App
Organizzare il codice JavaScript utilizzando i moduli
Utilizzare .NET Framework con le Azure Function in modalità isolata
Utilizzare l'attributo HTML inert per disabilitare gli eventi
Utilizzare la libreria EntityFrameworkCore.Exceptions per gestire le eccezioni di Entity Framework Core in modo tipizzato
Taggare automaticamente un repository con un workflow di GitHub
Gestire tipi complessi in query string grazie a IParsable in ASP.NET Core 7.0
Utilizzare ChatGPT con Azure OpenAI
Ottimizzare il codice JavaScript utilizzando WeakMap e WeakSet
GitHub <3 .NET
Utilizzare i nuovi piani dedicati di Azure Container Apps