Jetzt wollen wir einen Variablenwert innerhalb einer Medienabfrage ändern.
Tipp: Bei Medienabfragen geht es um die Definition verschiedener Stilregeln für verschiedene Geräte (Bildschirme, Tablets, Mobiltelefone usw.). Sie können mehr erfahren Medienabfragen in unserem Kapitel zu Medienabfragen.
Hier deklarieren wir zunächst eine neue lokale Variable mit dem Namen --fontsize für .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 breiter ist, ändern Sie den Variablenwert --fontsize .container
Klasse auf 50 Pixel.
Hier ist das komplette 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;
}
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 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;
}
}
</style>
</head>
<body>
<h1>Using Variables in Media Queries</h1>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>When the browser's width is less than 450px, the font-size of this div is 25px. When it is 450px or wider, set the --fontsize variable value to 50px. Resize the browser window to see the effect.</p>
</div>
</body>
</html>
Hier ist ein weiteres Beispiel, bei dem wir auch den Wert der Variablen --blue ändern in der @media
-Regel:
/* 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;
}
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 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;
}
}
</style>
</head>
<body>
<h1>Using Variables in Media Queries</h1>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>When the browser's width is 450px or wider, set the --fontsize variable value to 50px and the --blue variable value to lightblue. Resize the browser window to see the effect.</p>
</div>
</body>
</html>
Die Zahlen in der Tabelle geben die erste Browserversion an, die das vollständig unterstützt var()
-Funktion.
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Fügt den Wert einer CSS-Variablen ein