CSS 在媒体查询中使用变量

在媒体查询中使用变量

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

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

在这里，我们首先为 .container 类声明一个名为 —fontsize 的新局部变量。我们将其值设置为 25 像素。然后我们在 .container 类中进一步使用它。然后，我们创建一个 @media 规则，内容为“当浏览器的宽度为 450px 或更宽时，将 .container 类的 —fontsize 变量值更改为 50px。”

这是完整的实例：

实例

  1. /* 变量声明 */
  2. :root {
  3.   --blue: #1e90ff;
  4.   --white: #ffffff;
  5. }
  7. .container {
  8.   --fontsize: 25px;
  9. }
  11. /* 样式 */
  12. body {
  13.   background-color: var(--blue);
  14. }
  16. h2 {
  17.   border-bottom: 2px solid var(--blue);
  18. }
  20. .container {
  21.   color: var(--blue);
  22.   background-color: var(--white);
  23.   padding: 15px;
  24.   font-size: var(--fontsize);
  25. }
  27. @media screen and (min-width: 450px) {
  28.   .container {
  29.     --fontsize: 50px;
  30.   }
  31. }

css3_var_mq_1.htm

这是另一个例子，在其中我们还更改了 @media 规则中 —blue 变量的值：

实例

  1. /* 变量声明 */
  2. :root {
  3.   --blue: #1e90ff;
  4.   --white: #ffffff;
  5. }
  7. .container {
  8.   --fontsize: 25px;
  9. }
  11. /* 样式 */
  12. body {
  13.   background-color: var(--blue);
  14. }
  16. h2 {
  17.   border-bottom: 2px solid var(--blue);
  18. }
  20. .container {
  21.   color: var(--blue);
  22.   background-color: var(--white);
  23.   padding: 15px;
  24.   font-size: var(--fontsize);
  25. }
  27. @media screen and (min-width: 450px) {
  28.   .container {
  29.     --fontsize: 50px;
  30.   }
  31.    :root {
  32.     --blue: lightblue;
  33.   }
  34. }

css3_var_mq_2.htm

浏览器支持

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

函数 Chrome Internet Explorer_Edge Firefox Safari Opera
var() 49.0 15.0 31.0 9.1 36.0

CSS var() 函数

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