CSS Variablen in Medienabfragen verwenden

Verwenden Sie Variablen in Media Queries

Jetzt möchten wir den Wert der Variable in der Media Query ändern.

Tipp:Media Queries sind darauf ausgelegt, verschiedene Styleregeln für verschiedene Geräte (Monitore, Tablets, Smartphones usw.) zu definieren. Mehr über Media Queries können Sie im Kapitel "Media Queries" lernen.

Hier erklären wir zunächst eine neue lokale Variable --fontsize für die Klasse .container. Wir setzen ihren Wert auf 25 Pixel. Anschließend verwenden wir sie weiter in der Klasse .container. Dann erstellen wir eine @media-Regel mit dem Inhalt: "Wenn die Breite des Browsers 450px oder breiter ist, wird der Wert der Variable --fontsize der Klasse .container auf 50px geändert."

Dies ist das vollständige Beispiel:

实例

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 样式 */
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

Dies ist ein weiteres Beispiel, in dem wir auch den Wert der Variable --blue im @media-Regel geändert haben:

实例

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* 样式 */
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

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Funktion
var() 49.0 15.0 31.0 9.1 36.0

CSS var() Funktion

Funktion Beschreibung
var() Legen Sie den Wert der CSS-Variablen ein.