css零到一高级教程025：CSS 在媒体查询中使用变量-CFANZ编程社区

css零到一高级教程025：CSS 在媒体查询中使用变量

在媒体查询中使用变量

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

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

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

这是完整的实例：

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 变量声明 */ 
: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) {

0 条评论