CSS 变量 - 媒体查询

CSS 在媒体查询中使用变量

在媒体查询中使用变量

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

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

在这里,我们首先为 .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;  }}

亲自试一试

浏览器支持

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

函数
var()49.015.031.09.136.0

CSS var() 函数

函数描述
var()插入 CSS 变量的值。