• CSS 变量 - JavaScript
• CSS Box Sizing

在媒体查询中使用变量

现在，我们希望在媒体查询中修改变量值。

提示：媒体查询旨在为不同的设备（显示器、平板电脑、手机等）定义不同的样式规则。您可以在“媒体查询”一章中学习更多有关媒体查询的知识。

在这里，我们首先为 .container 类声明一个名为 --fontsize 的新局部变量。我们将其值设置为 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;  }}

亲自试一试

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

CSS var() 函数

• CSS 变量 - JavaScript
• CSS Box Sizing