创新的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
item1item2item3item4老方法：你可以在不使用CSS变量的情况下完成这些事情。只需要重新设置要改变的属性，媒体查询中需要有自己的选择器，但是会产生很多额外的代码，像这样：.item{display:flex;弹性方向：列；弹性包装：包装；证明内容：周围空间；填充：10px；li{背景颜色：#ff6f69;边框：1px实心#fff；字体大小：20px；高度：200px；列表样式类型：无；宽度：100%；}}@media(min-width:768px){.item{flex-direction:row;li{背景颜色：#ffcc5c;字体大小：50px；高度：300px；宽度：50%；}}}@media(min-width:992px){.item{flex-wrap:nowrap;li{背景颜色：#ffeead;字体大小：100px；高度：500px；宽度：计算（100%/4）；}}}ViewEffectNewmethod让我们看看如何使用CSS变量来解决这个问题。首先，将我们将重用和更改的值存储在一个变量中：:root{--base-color:#ff6f69;--base-font-size:20px;--方向：列；--宽度：100%；--height:200px;}然后，只需在整个页面中使用这些变量：.item{display:flex;填充：10px；证明内容：周围空间；弹性方向：var(--direction);弹性包装：var（--wrap）；li{列表样式类型：无；边框：1px实心#fff；高度：var(--height)；宽度：var(--宽度)；背景颜色：var(--base-color);字体大小：var(--base-font-size);}}设置好后，我们可以简单地更改媒体查询中的变量值：@media(min-width:768px){:root{--base-font-size:60px;--基色：#ffcc5c；--方向：行；--高度：300px；--宽度：50%；--换行：换行；}}@media(min-width:992px){:root{--base-font-size:100px;--基色：#ffeead；--方向：行；--高度：500px；--宽度：计算（100%/4）；--wrap:nowrap;}}查看效果这个比我们之前的方法简单多了。只针对:root而不是为所有选择器指定值。这只是一个简单的例子。想象一下一个成熟的网站会是什么样子，例如，使用--base-margin来控制应用程序周围的大部分可用空间。翻转它的值也很容易，而不必用复杂的选择器填充媒体查询。总之，就响应能力而言，CSS变量绝对是未来。作者：w3cbest前端开发互动：如有疑问可进群讨论本文原创性，版权归作者所有。商业转载请联系@w3cbest前端开发获得授权。非商业转载请注明原文链接和出处。
