在媒体查询中使用 CSS 变量
在媒体查询中使用变量
现在我们想在媒体查询中更改变量值。
提示: 媒体查询用于为不同设备（屏幕、平板电脑、手机等）定义不同的样式规则。您可以在我们的 媒体查询章节 中了解更多关于媒体查询的信息。
这里，我们首先声明了一个名为 --fontsize 的新的局部变量，它用于 .container 类。我们将其值设置为 25 像素。然后我们在下面的 .container 类中使用它。然后，我们创建一个 @media 规则，该规则说“当浏览器的宽度为 450px 或更宽时，将 .container 类的 --fontsize 变量值更改为 50px”。
以下是完整的示例
示例
/* 变量声明 */
: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 变量的值 |
