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
Migrare una service connection a workload identity federation in Azure DevOps
Verificare la provenienza di un commit tramite le GitHub Actions
Aggiungere interattività lato server in Blazor 8
Disabilitare automaticamente un workflow di GitHub (parte 2)
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Creare alias per tipi generici e tuple in C#
Utilizzare un service principal per accedere a Azure Container Registry
Usare le variabili per personalizzare gli stili CSS
Utilizzare Model as a Service su Microsoft Azure
Gestire i null nelle reactive form tipizzate di Angular
Potenziare Azure AI Search con la ricerca vettoriale
Installare le Web App site extension tramite una pipeline di Azure DevOps