在创新的2018年已经过去，在2019年看看如何简单做成响应性的网站如果你未曾听说过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);}这样的语法看起来的确有点怪怪的，但有没有觉得它和less、sass中的变量有点类似呢，但如此一来，只要更改–base-font-size 变量，就能在整个应用中改变字号了。如果你想把CSS变量学明白，可以在Scrimba网站 这里有免费互动CSS变量课程，该课程包含8个互动截屏。今天来讲一下如何用CSS变量创建响应布局这是一段html<ul class=“item”> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li></ul>老方法：在以前即使不使用CSS变量也可以把这些事情搞定。只是需要把要改变的属性在重新重置一下，需要在媒体查询中拥有自己的选择器，但会招致额外的大量代码，像下面这样：.item { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-around; padding: 10px; li { background-color: #ff6f69; border: 1px solid #fff; font-size: 20px; height: 200px; list-style-type: none; width: 100%; }}@media (min-width: 768px) { .item { flex-direction: row; li { background-color: #ffcc5c; font-size: 50px; height: 300px; width: 50%; } }}@media (min-width: 992px) { :root { –base-font-size: 100px; –base-color: #ffeead; –height: 500px; –width: calc(100% / 4); –wrap: nowrap; } .item { flex-wrap: nowrap; li { background-color: #ffeead; font-size: 100px; height: 500px; width: calc(100% / 4); } }}新方法下面让我们来看如何使用CSS变量来解决这个问题。首先，要把我们将重复利用和更改的数值存储在变量的内部：:root { –base-color: #ff6f69; –base-font-size: 20px; –direction: column; –width: 100%; –height: 200px;}然后，在整个页面中简单地使用这些变量就行了：.item { display: flex; padding: 10px; justify-content: space-around; flex-direction: var(–direction); flex-wrap: var(–wrap); li{ list-style-type: none; border: 1px solid #fff; height: var(–height); width: var(–width); background-color: var(–base-color); font-size: var(–base-font-size); }}一旦进行了这样的设置之后，我们只要在媒体查询中简单地更改变量值就行了：@media (min-width: 768px) { :root { –base-font-size: 60px; –base-color: #ffcc5c; –direction: row; –height: 300px; –width: 50%; –wrap:wrap; }}@media (min-width: 992px) { :root { –base-font-size: 100px; –base-color: #ffeead; –direction: row; –height: 500px; –width: calc(100% / 4); –wrap:nowrap; }}这比我们以往的方法简便多了。只需盯住 :root，而不必为所有的选择器指定值了。这只是一个简单的例子。设想成熟的网站会是什么样子吧，例如，用 –base-margin 来控制APP四周的多数自由空间。想翻转其值也是很容易的事情，不必用复杂的选择器来填充媒体查询了。总之，CSS变量绝对是提高响应速度时，所代表的未来。查看效果作者： w3cbest前端开发 互动： 如有疑问可进群讨论本文原创，著作权归作者所有。商业转载请联系@w3cbest前端开发获得授权，非商业转载请注明原链接及出处。