CSS brug af variabler i medieforespørgsler

Brug af variabler i medieforespørgsel

Nu ønsker vi at ændre variabelværdien i medieforespørgslen.

Tip:Medieforespørgsel er designet til at definere forskellige stilregler for forskellige enheder (skærme, tablets, telefoner osv.). Du kan lære mere om medieforespørgsler i kapitlet om medieforespørgsler.

Her erklærer vi først en ny lokal variabel --fontsize for .container-klassen. Vi sætter dens værdi til 25 pixels. Derefter bruger vi den yderligere i .container-klassen. Derefter opretter vi en @media-regel, der indeholder "Når browserens bredde er 450px eller bredere, ændres værdien af --fontsize-variablen for .container-klassen til 50px."

Dette er den fulde eksempel:

Eksempel

/* Variabeldeklaration */
:root {
  --blå: #1e90ff;
  --hvid: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* Stilar */
body {
  background-color: var(--blå);
}
h2 {
  border-bottom: 2px solid var(--blå);
}
.container {
  color: var(--blå);
  background-color: var(--hvid);
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
}

Prøv det selv

Dette er et andet eksempel, hvor vi også ændrer værdien af variablen --blå i @media-reglen:

Eksempel

/* Variabeldeklaration */
:root {
  --blå: #1e90ff;
  --hvid: #ffffff;
}
.container {
  --fontsize: 25px;
}
/* Stilar */
body {
  background-color: var(--blå);
}
h2 {
  border-bottom: 2px solid var(--blå);
}
.container {
  color: var(--blå);
  background-color: var(--hvid);
  padding: 15px;
  font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
   :root {
    --blue: lightblue;
  }
}

Prøv det selv

Browserstøtte

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Funktion
var() 49.0 15.0 31.0 9.1 36.0

CSS var() funktion

Funktion Beskrivelse
var() Indsæt værdien for CSS variablen.