我相信如此优秀的你
已经固定我了
如果您以前没有听说过 CSS 变量，我现在告诉您：这是 CSS 的一项新功能，使您无需任何配置即可在样式表中使用变量。
事实上，CSS 变量允许您改变旧的样式方式：
h1{
font-size:30px;
}
navbar > a {
font-size:30px;
} 使用 CSS 变量后：
:root {
--base-font-size: 30px;
}
h1 {
font-size: var(--base-font-size);
}
navbar > a {
font-size: var(--base-font-size);
} 这种语法有点奇怪响应式布局 css3，但它确实允许您通过更改 --base-font-size 值来更改应用程序中的所有本机字体大小。
好吧，现在让我们看看如何使用这些新知识来使响应式网站变得越来越容易。
初始配置
让我们将以下页面设为响应式：
这个页面在PC端看起来不错，但是可以看到在联通端表现不佳。 就像下面这样：
在下图中，我们稍微调整了样式，使其看起来更好一些：
重新排列了整个网格布局，使用垂直排列而不是固定的两列布局。
整体框架向上移动了一点。
字体已缩放。
把目光转向 CSS 代码，下面是我们要更改的代码：
h1 {
font-size: 30px;
}
#navbar {
margin: 30px 0;
}
#navbar a {
font-size: 30px;
}
.grid {
margin: 30px 0;
grid-template-columns: 200px 200px;
} 更具体地说，我们需要在媒体查询中进行以下调整：
●调整h1字体为20px；
●将#navbar北外线间距缩小为15px；
● 将#navbar 的字体大小减小至20px；
●将.grid的外部距离减小到15px；
● 将.grid 从两列布局更改为单列布局。
注意：样式表中不仅有这些 CSS 声明，但我在本教程中跳过它们，因为媒体查询不会影响它们的设置。 您可以在此处获取完整代码。
老方法
不使用CSS变量确实可以达到同样的效果，但是这会减少很多不必要的代码，因为其中大部分的改变都需要重新绘制媒体查询中的声明。 就像下面这样：
@media all and (max-width: 450px) {
navbar {
margin: 15px 0;
}
navbar a {
font-size: 20px;
}
h1 {
font-size: 20px;
}
.grid {
margin: 15px 0;
grid-template-columns: 200px;
}
} 新方法
现在让我们看看如何使用 CSS 变量。 首先，我们需要声明需要修改或重用的变量：
:root {
--base-font-size: 30px;
--columns: 200px 200px;
--base-margin: 30px;
} 之后，我们只需要在应用程序中使用它们即可。 很简单的：
#navbar {
margin: var(--base-margin) 0;
}
#navbar a {
font-size: var(--base-font-size);
}
h1 {
font-size: var(--base-font-size);
}
.grid {
margin: var(--base-margin) 0;
grid-template-columns: var(--columns);
} 稍后，我们可以在媒体查询中更改此变量值：
@media all and (max-width: 450px) {
:root {
--columns: 200px;
--base-margin: 15px;
--base-font-size: 20px;
} 
这段代码是不是比之前简洁了很多？ 我们只需要关注 :root 选择器。
我们将媒体查询中的 4 个声明减少到 1 个，代码从 13 行减少到 4 行。
其实这只是一个简单的反例。 想象一下，有一个 --base-margin 变量来控制大型或小型网站上的所有外部边距。 当您想要在媒体查询期间更改某个属性时，不需要用复杂的声明填充整个媒体查询，只需更改该变量的值即可。
事实上响应式布局 css3，CSS 变量可以针对未来的响应能力进行定义。
这里有你想看的精彩事物
感谢您的阅读，如果您觉得我的公众号还不错，请帮我推荐给您的同事，谢谢。
后端大牛爱好者：每晚一篇后端技术文章，不定期发后端干货
