提示:媒体查询旨在为不同的设备(显示器、平板电脑、手机等)定义不同的样式规则。您可以在“媒体查询”一章中学习更多有关媒体查询的知识。
在这里,我们首先为 .containe 类声明一个名为 --fontsize 的新局部变量。我们将其值设置为 25 像素。然后我们在 .container 类中进一步使用它。然后,我们创建一个 @media 规则,内容为“当浏览器的宽度为 450px 或更宽时,将 .container 类的 --fontsize 变量值更改为 50px。”
代码如下:
/* 变量声明 */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width: 450px) {
.container {
--fontsize: 50px;
}
}