在媒体查询中使用 CSS 变量
在媒体查询中使用变量
现在我们想在媒体查询中更改变量的值。
提示：媒体查询用于为不同设备（屏幕、平板电脑、手机等）定义不同的样式规则。您可以在我们的媒体查询章节中了解更多关于媒体查询的信息。
在这里，我们首先为 .container 类声明一个名为 --fontsize 的新局部变量。我们将其值设置为 25 像素。然后我们在后面的 .container 类中使用它。然后，我们创建一个 @media 规则，其含义是“当浏览器宽度为 450 像素或更宽时，将 .container 类的 --fontsize 变量值更改为 50 像素。”
这是完整的示例
示例
/* 变量声明 */
: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;
}
}
自己动手试一试 »
这是另一个示例，我们在 @media 规则中也更改了 --blue 变量的值
示例
/* 变量声明 */
: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() 函数的第一个浏览器版本。
| 函数 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 函数
| 属性 | 描述 |
|---|---|
| var() | 插入 CSS 变量的值 |
