[翻译]CSS变量让你轻松制做响应式网页

原文地址：medium.freecodecamp.org/how-to-make…
做者：Per Harald Borgen
摘要：这是一篇2018年制做响应性网页的快速教程。

若是你以前没有据说过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);
}
复制代码

这样的词法有点奇怪，但它确实可以让你经过仅改变--base-font-size的值来改变app中全部原生的字体大小。

若是你想要学习CSS变量的知识，能够登陆Scrimba看个人视频课程，或是阅读我在Medium上写的文章：如何学习CSS变量。

好了，如今让咱们看看如何使用这个新知识来更加简单地制做响应式站点吧。

初始配置

让咱们来把下面这个页面变成响应式的吧：

这个页面在PC端看上去很不错，不过你能够看到它在移动端的表现并很差。就像下面这样：

在下面这张图中，咱们在样式上作了一些改进，让它看起来更好一点：

1. 从新排列整个网格布局，使用垂直排列取代固定两列布局。
2. 将框架总体上移了一点。
3. 对字体进行了缩放。

目光转到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;
}
复制代码

而后，咱们只须要在app中使用它们就能够了。很是简单：

#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变量控制着全部的外边距。当你想要在媒体查询时修改属性，并不须要用复杂的声明填充整个媒体查询，只是简简单单地修改这个变量值就能够了。

总之，CSS变量能够定义为将来的响应式。若是你想要学习更多的知识，我推荐你看个人免费教程。用不了多久你就能成为一个CSS变量大师。

查看更多我翻译的Medium文章请访问：
项目地址：github.com/WhiteYin/tr…