CSS在媒体查询中使用变量

Użycie zmiennych w zapytaniach mediowych

Teraz chcemy zmienić wartość zmiennej w zapytaniu mediowym.

Wskazówka:Zapytania mediowe mają na celu określenie różnych reguł stylów dla różnych urządzeń (ekrany, tablety, telefony itp.). Możesz dowiedzieć się więcej o zapytaniach mediowych w rozdziale "Zapytania mediowe".

Tutaj najpierw deklarujemy nową lokalną zmienną --fontsize dla klasy .container. Ustawiamy jej wartość na 25 pikseli. Następnie używamy jej w klasie .container. Następnie tworzymy regułę @media, która zawiera treść "Gdy szerokość przeglądarki wynosi 450px lub więcej, zmień wartość zmiennej --fontsize klasy .container na 50px."

To jest pełny przykład:

实例

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

亲自试一试

To jest inny przykład, w którym zmieniliśmy również wartość zmiennej --blue w regule @media:

实例

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

亲自试一试

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

函数
var() 49.0 15.0 31.0 9.1 36.0

CSS var() 函数

函数 描述
var() 插入 CSS 变量的值。