CSS 在媒体查询中使用变量
在媒体查询中使用变量
现在我们想要改变媒体查询中的变量值。
提示： 媒体查询是关于为不同的设备（屏幕、平板电脑、手机等）定义不同的样式规则。您可以在我们的媒体查询章节.
在这里，我们首先为 .container 类。我们将其值设置为 25 像素。然后我们在.container 类。然后我们创建一个@media 规则规定“当浏览器的宽度为 450px 或更宽时，更改 --fontsize 变量的值.container 类为 50px。”
以下是完整的示例：
例子
/* 变量声明 */
：根 {
--蓝色：#1e90ff；
--白色：#ffffff；
}
。容器 {
--字体大小：25px；
}
/* 样式 */
身体 {
背景颜色：var（--blue）；
}
h2 {
底部边框：2px 实线 var(--blue)；
}
。容器 {
颜色：var（--蓝色）；
背景颜色：var（--white）；
填充：15px；
字体大小：var（--fontsize）；
}
@media 屏幕和（最小宽度：450px）{
。容器 {
--字体大小：50px；
}
}
亲自尝试 »
这是另一个示例，其中我们还更改了 --blue 变量的值 @media 规则：
例子
/* 变量声明 */
：根 {
--蓝色：#1e90ff；
--白色：#ffffff；
}
。容器 {
--字体大小：25px；
}
/* 样式 */
身体 {
背景颜色：var（--blue）；
}
h2 {
底部边框：2px 实线 var(--blue)；
}
。容器 {
颜色：var（--蓝色）；
背景颜色：var（--white）；
填充：15px；
字体大小：var（--fontsize）；
}
@media 屏幕和（最小宽度：450px）{
。容器 {
--字体大小：50px；
}
：根 {
--蓝色：浅蓝色；
}
}
亲自尝试 »
浏览器支持
表中的数字表示第一个完全支持 var() 功能。
| 功能 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 函数
| 财产 | 描述 |
|---|---|
| var() | 插入 CSS 变量的值 |
