CSS variabelen gebruiken in mediaquery's
Variabelen gebruiken in mediaquery's
Nu willen we een variabelewaarde binnen een mediaquery wijzigen.
Tip: Mediaquery's gaan over het definiëren van verschillende stijlregels voor verschillende apparaten (schermen, tablets, mobiele telefoons, enz.). U kunt meer informatie over mediaquery's vinden in ons hoofdstuk over mediaquery 's .
Hier declareren we eerst een nieuwe lokale variabele met de naam --fontsize voor de
.containerklasse. We stellen de waarde in op 25 pixels. Dan gebruiken we het in de
.containerklas verderop. Vervolgens maken we een
@mediaregel die zegt: "Als de breedte van de browser 450px of breder is, verander dan de --fontsize variabele waarde van de
.containerklasse in 50px."
Hier is het volledige voorbeeld:
Voorbeeld
/* 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;
}
}
Hier is nog een voorbeeld waarbij we ook de waarde van de --blue variabele in de @mediaregel wijzigen:
Voorbeeld
/* 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;
}
}
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die de
var()functie volledig ondersteunt.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Functie
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |