CSS använda variabler i mediefrågor

Använd variabler i media queries

Nu vill vi ändra variabelvärdet i media queries.

Tips:Media queries syftar till att definiera olika stilregler för olika enheter (datorer, surfplattor, telefoner osv.). Du kan lära dig mer om media queries i avsnittet om media queries.

Här deklarerar vi först en ny lokal variabel --fontsize för klassen .container. Vi sätter dess värde till 25 pixlar. Sedan använder vi det vidare i klassen .container. Sedan skapar vi en @media-regel som innehåller "När bredden på webbläsaren är 450px eller bredare, ändra värdet på variabeln --fontsize för klassen .container till 50px."

Detta är den fullständiga exempel:

实例

/* 变量声明 */
: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;
  }
}

Prova själv

Detta är ett annat exempel, där vi också ändrade värdet för variabeln --blue i @media-regeln:

实例

/* 变量声明 */
: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;
  }
}

Prova själv

Webbläsarsupport

Talen i tabellen anger den första webbläsaren som helt stöder denna egenskap.

Funktion
var() 49.0 15.0 31.0 9.1 36.0

CSS var() funktion

Funktion Beskrivning
var() Infoga värdet för CSS-variabeln.