CSS 在媒体查询中使用变量

目录

    显示目录

在媒体查询中使用变量

现在我们想要更改媒体查询中的变量值。

提示：媒体查询是关于定义不同的样式规则 适用于不同的设备（屏幕、平板电脑、手机等）。您可以了解更多 我们的媒体查询章节中的媒体查询。

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

这是完整的示例：

例子

 /* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
  }

  .container {
  --fontsize: 25px;
}
/* Styles */
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;
  }
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

.container {
  --fontsize: 25px;
}

/* Styles */ 
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;
  }
}
</style>
</head>
<body>

<h1>Using Variables in Media Queries</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>When the browser's width is less than 450px, the font-size of this div is 25px. When it is 450px or wider, set the --fontsize variable value to 50px. Resize the browser window to see the effect.</p>
</div>

</body>
</html>

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

例子

 /* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
  }

  .container {
  --fontsize: 25px;
}
/* Styles */
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;
  }
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Variable declarations */ 
:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

.container {
  --fontsize: 25px;
}

/* Styles */ 
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;
  }
}
</style>
</head>
<body>

<h1>Using Variables in Media Queries</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>When the browser's width is 450px or wider, set the --fontsize variable value to 50px and the --blue variable value to lightblue. Resize the browser window to see the effect.</p>
</div>

</body>
</html>

浏览器支持

表中的数字指定第一个完全支持的浏览器版本 var() 函数。

Function
var() 49.0 15.0 31.0 9.1 36.0

CSS var() 函数

var()

插入 CSS 变量的值