如果你之前没有听说过CSS变量，那么现在我将告诉你：它是CSS的新特性，让你能够在样式表中使用变量的能力，并且无需任何配置。
实际上，CSS变量能够让你改变以往设置样式的老方法：
|
1
2
3
4
5
6
|
h1{
font-size:30px;
}
navbar > a {
font-size:30px;
}
|
而使用了CSS变量之后：
|
1
2
3
4
5
6
7
8
9
|
:root {
--base-font-size: 30px;
}
h1 {
font-size: var(--base-font-size);
}
navbar > a {
font-size: var(--base-font-size);
}
|
这样的词法有点奇怪，但它确实能够让你通过仅改变--base-font-size的值来改变app中所有原生的字体大小。
如果你想要学习CSS变量的知识，可以登录Scrimba看我的视频课程，或是阅读我在Medium上写的文章：如何学习CSS变量。
好了，现在让我们看看如何使用这个新知识来更加简单地制作响应式站点吧。
初始配置
让我们来把下面这个页面变成响应式的吧：
这个页面在PC端看上去很不错，不过你可以看到它在移动端的表现并不好。就像下面这样：
在下面这张图中，我们在样式上做了一些改进，让它看起来更好一点：
- 重新排列整个网格布局，使用垂直排列取代固定两列布局。
- 将框架整体上移了一点。
- 对字体进行了缩放 。
目光转到CSS代码中，下面是我们要修改的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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从两列布局变为单列布局。