CSS mit Variablen in Medienabfragen
Verwenden von Variablen in Medienabfragen
Jetzt wollen wir einen Variablenwert innerhalb einer Medienabfrage ändern.
Tipp: Bei Media Queries geht es darum, unterschiedliche Stilregeln für verschiedene Geräte (Bildschirme, Tablets, Handys etc.) zu definieren. Weitere Informationen zu Medienabfragen finden Sie in unserem Kapitel zu Medienabfragen .
Hier deklarieren wir zunächst eine neue lokale Variable namens --fontsize für die
.container
Klasse. Wir setzen seinen Wert auf 25 Pixel. Dann verwenden wir es in der
.container
Klasse weiter unten. Dann erstellen wir eine
@media
Regel, die besagt: „Wenn die Breite des Browsers 450 Pixel oder mehr beträgt, ändern Sie den Variablenwert --fontsize der
.container
Klasse auf 50 Pixel.“
Hier ist das vollständige Beispiel:
Beispiel
/* 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 ist ein weiteres Beispiel, bei dem wir auch den Wert der Variable --blue in der @media
Regel ändern:
Beispiel
/* 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;
}
}
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die
var()
Funktion vollständig unterstützt.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS-var()-Funktion
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |