前言：这是一篇转载文，确实写的不错，今天分享给大家，希望大家能集百家之长，学到更多有用的知识~

　　如果你之前没有听说过CSS变量，那么现在我将告诉你：它是CSS的新特性，让你能够在样式表中使用变量的能力，并且无需任何配置。

　　这样的词法有点奇怪，但它确实能够让你通过仅改变--base-font-size的值来改变app中所有原生的字体大小。

　　如果你想要学习CSS变量的知识，可以登录Scrimba看我的视频课程，或是阅读我在Medium上写的文章：如何学习CSS变量。

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

　　注意：样式表里不仅仅是这些CSS声明，但是在这篇教程中我跳过它们，因为媒体查询并不影响它们的设置。你可以在这里获取完整的代码。

　　不使用CSS变量确实可以做到同样的效果，但这样会增加许多不必要的代码，因为上面大部分修改都需要将声明在媒体查询中重写一遍。就像下面这样：

　　现在让我们看看使用CSS变量是如何起作用的。首先，我们要声明需要更改或复用的变量：

　　这样的代码是不是比之前要简洁多了？我们只需要专注于:root选择器就可以了。

　　当然，这只是一个简单的例子。想象一下，在一个大中型网站中，有一个--base-margin变量控制着所有的外边距。当你想要在媒体查询时修改属性，并不需要用复杂的声明填充整个媒体查询，只是简简单单地修改这个变量值就可以了。

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

　　声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。

　　配置丰富外观好看配置低隔音效果差车灯不好看性价比低油耗高看看网友怎么说》图片