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
Utilizzare Copilot con Azure Cosmos DB
Definire stili a livello di libreria in Angular
Usare una container image come runner di GitHub Actions
Usare il colore CSS per migliorare lo stile della pagina
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Effettuare lo stream della risposta in ASP.NET Core tramite IAsyncEnumerable
Creare alias per tipi generici e tuple in C#
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Creazione di componenti personalizzati in React.js con Tailwind CSS
Utilizzare gRPC su App Service di Azure
Gestire liste di tipi semplici con Entity Framework Core
Autenticarsi in modo sicuro su Azure tramite GitHub Actions