CSS che utilizza variabili nelle query multimediali
Utilizzo di variabili nelle query multimediali
Ora vogliamo modificare un valore di variabile all'interno di una query multimediale.
Suggerimento: le Media Query riguardano la definizione di regole di stile diverse per dispositivi diversi (schermi, tablet, telefoni cellulari, ecc.). Puoi saperne di più sulle domande sui media nel nostro capitolo sulle domande sui media .
Qui, per prima cosa dichiariamo una nuova variabile locale denominata --fontsize per la
.containerclasse. Impostiamo il suo valore su 25 pixel. Quindi lo usiamo nella
.containerclasse più in basso. Quindi, creiamo una
@mediaregola che dice "Quando la larghezza del browser è 450px o più ampia, cambia il valore della variabile --fontsize della
.containerclasse in 50px".
Ecco l'esempio completo:
Esempio
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
}
Ecco un altro esempio in cui cambiamo anche il valore della variabile --blue nella @mediaregola:
Esempio
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
:root {
--blue: lightblue;
}
}
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la
var()funzione.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Funzione
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |