如何使用 CSS 变量让响应变得非常简单

单击图像即可获得免费的完整 CSS 变量课程。

如果您以前没有听说过 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;  
}

And then we’ll simply use these variables across the 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，而不是指定所有的选择器。

我们将媒体查询从四个选择器减少到一个，从十三行减少到四行。

这只是一个简单的例子。想象一下一个功能齐全的网站，例如，--base-margin控制着应用程序周围的大部分可用空间。与其用复杂的选择器填满你的媒体查询，不如直接翻转它的值简单得多。

总而言之，CSS 变量绝对是响应式设计的未来。如果你想彻底掌握这项技术，我推荐你看看我在 Scrimba 上关于这个主题的免费课程。

您很快就会成为 CSS 变量大师 :)

感谢阅读！我是 Per Borgen，Scrimba 的前端开发者和联合创始人。如果您有任何问题或意见，欢迎通过 Twitter联系我。

文章来源：https://dev.to/scrimba/how-to-make-responsiveness-super-simple-with-css-variables-1gnm