HaraldBorgen总结：这是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值来更改应用程序中的所有本机字体大小。如果你想了解CSS变量，可以登录Scrimba观看我的视频课程，或者阅读我在Medium上的文章：HowtolearnCSSvariables。好了，现在让我们看看如何使用这些新知识来使响应式网站变得更容易。初始配置让我们将以下页面设为响应式：该页面在桌面上看起来不错，但如您所见，它在移动设备上的表现不佳。像这样：在下图中，我们做了一些样式上的改进，让它看起来更好看：重新排列整个网格布局，使用垂直排列而不是固定的两列布局。将框架整体向上移动了一点。字体已缩放。将目光转向CSS代码，这里是我们要修改的代码：h1{font-size:30px;}#navbar{margin:30px0;}#navbara{font-size:30px;}.grid{margin:30px0;grid-template-columns:200px200px;}更具体地说，我们需要在媒体查询中进行以下调整：将h1的字体调整为20px；将#navbar的上边距减少到15px；更改#navbar将.grid的字体大小减小为20px；将.grid的边距减少到15px；将.grid从两列布局更改为单列布局。注意：这些不是样式表中唯一的CSS声明，但我在本教程中跳过了它们，因为媒体查询不会影响它们的设置。您可以在此处获取完整代码。老方法确实可以在不使用CSS变量的情况下达到同样的效果，但是这样会增加很多不必要的代码，因为上面的大部分修改都需要重写媒体查询中的声明。像这样：@mediaalland(max-width:450px){navbar{margin:15px0;}导航栏{font-size:20px;}h1{字体大小：20px；}.grid{边距：15px0;网格模板列：200px；}}新方法现在让我们看看如何使用CSS变量。首先，我们需要声明需要更改或重用的变量：:root{--base-font-size:30px;--列：200px200px；--base-margin:30px;}然后，我们只需要使用它们即可。非常简单：#navbar{margin:var(--base-margin)0;}#navbara{font-size:var(--base-font-size);}h1{font-size:var(--base-字体大小);}.grid{边距:var(--base-margin)0;grid-template-columns:var(--columns);}之后我们可以在媒体查询中修改这些变量值：@mediaalland(max-width:450px){:root{--columns:200像素;--base-margin:15px;--base-font-size:20px;}这段代码是不是比以前简洁了很多？？我们只需要关注:root选择器。我们将媒体查询中的4个声明减少到1个，代码从13行减少到4行。当然，这只是一个简单的例子。想象一下，有一个--base-margin变量控制中型到大型网站的所有边距。当你想修改媒体查询中的某个属性时，不需要用复杂的声明填充整个媒体查询，只需要简单地修改这个变量的值即可。总之，可以为将来的响应定义CSS变量。如果您想了解更多信息，我建议您观看我的免费教程。用不了多久，您就会成为CSS变量的大师。查看我翻译的更多Medium文章，请访问：项目地址：https://github.com/WhiteYin/translation
