CSS 在媒体查询中使用变量

在媒体查询中使用变量

现在我们想要更改媒体查询中的变量值。

提示：媒体查询是为不同的设备（屏幕、平板电脑、手机等）定义不同的样式规则。您可以在我们的网站中了解更多媒体查询媒体查询章节。

在这里，我们首先声明一个名为 --fontsize 的新局部变量.container类。我们将其值设置为 25 像素。然后我们在.container类再往下。然后，我们创建一个@media规则说“当浏览器的宽度为 450px 或更宽时，更改 --fontsize 变量值.container类为 50px。”

这是完整的示例：

示例

/* 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;
}
}

亲自试一试 »

这是另一个示例，我们还更改了 --blue 变量的值@media规则：

示例

亲自试一试 »

浏览器支持

表中的数字指定第一个完全支持的浏览器版本var()函数。

Function
var()	49.0	15.0	31.0	9.1	36.0

CSS var() 函数

Property	Description
var()	Inserts the value of a CSS variable