本文是关于如何在2018年创建响应式网站的快速教程。
如果你之前没有听说过CSS变量，它就是CSS的新增功能，它让你可以在样式里使用变量的功能，而无需进行任何设置。
实质上，CSS变量允许你跳过设置样式的旧方式：
h1 {
font-size: 30px;
}
navbar > a {
font-size: 30px;
}
...更喜欢这种方式：
:root {
--base-font-size: 30px;
}
h1 {
font-size: var(--base-font-size);
}
navbar > a {
font-size: var(--base-font-size);
}
尽管语法看起来可能有些奇怪，但这带来明显的好处是，我们只要修改--base-font-size变量就能够改变整个应用的字体大小。
如果您想正确学习CSS变量，请查看我在Scrimba上免费的交互式CSS变量课程。
现在让我们看看这种新技术如何在构建响应式网站时让你变得更轻松。
设置
我们将对一个投资网站添加响应，如图所示：
在桌面上查看时看起来不错。 但是，如下图所示，此布局在移动设备上无法正常工作。
下图是我们更改了一些样式，以让他在移动设备上更好地工作。
以下是我们所做的：
- 重新排列网格，使其垂直堆叠而不是跨两列。
- 将整个布局往上移动一点点。
- 缩小字体
为了做到这一点，我们需要修改下面的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，即使在这些选择器中也是如此。 但是，为了本教程的缘故，我已经略去了媒体查询中未修改的所有内容。 看看这个Scrimba Playground来获取整个代码。
旧方法
如果没有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，而不是所有的选择器。
我们将媒体查询从四个选择器减少到一个，从十三行代码减少到四行。
这只是一个简单的例子。 想象一个完整的网站，例如， 使用--base-margin控制应用四周的空间。相对于在媒体查询里使用复杂的选择器修改值，这个超容易，只需要修改一个值即可。
总而言之，CSS变量绝对是响应式开发的未来。 如果你想一劳永逸地学习这项技术，我建议你查阅我在Scrimba关于这个主题的免费课程。
你将很快成为一名CSS变量大师:)
原文：How to make responsiveness super simple with CSS Variables