css 变量
关于如何在2019年创建响应式网站的快速教程。 (A quick tutorial on how to create responsive websites in 2019.)
If you haven’t heard of CSS Variables before, it’s a new feature of CSS which gives you the power of variables in your stylesheet, without having to do any setup.
如果您以前从未听说过CSS变量，那么它是CSS的一项新功能，它使您可以在样式表中使用变量，而无需进行任何设置。
In essence, CSS Variables allow you to skip the old way of setting styles:
本质上，CSS变量使您可以跳过设置样式的旧方法：
h1 {
font-size: 30px;
}
navbar > a {
font-size: 30px;
}
…in favour of this:
:root {
--base-font-size: 30px;
}
h1 {
font-size: var(--base-font-size);
}
navbar > a {
font-size: var(--base-font-size);
}While the syntax might seem a bit weird, this gives you the obvious benefit of being able to change the font sizes across your entire app through only changing the--base-font-size variable.
虽然语法看起来有些怪异，但这给您带来了明显的好处，即仅通过更改--base-font-size变量即可更改整个应用程序中--base-font-size 。
If you want to learn CSS Variables properly, please check out my free and interactive CSS Variables course on Scrimba:
如果您想正确学习CSS变量，请查看我在Scrimba上的免费和交互式CSS变量课程 ：
The course contains eight interactive screencasts.
该课程包含八个交互式截屏视频。
Or if you want to know more about the course, you can also read a walk-through of what you’ll learn in the article below:
或者，如果您想进一步了解本课程，还可以阅读以下文章的演练：
Want to learn CSS Variables? Here’s my free 8-part course!
Now let’s see how this new technology can make your life easier when building responsive websites.
现在，让我们看看在构建响应式网站时，这项新技术如何使您的生活更轻松。
设置 (The setup)
We’re going to add responsiveness to a portfolio website which looks like this:
我们将向如下所示的投资组合网站添加响应能力：
It looks nice when viewed on your desktop. However, as you can see on the left image below, this layout doesn’t work well on mobile.
在桌面上查看时看起来不错。 但是，如下面左图所示，此布局在移动设备上无法正常使用。
How it looks on mobile initially.
最初在移动设备上的外观。
How we want it to look.
我们希望它看起来如何。
On the right image, we’ve changed a few things on the styles to make it work better on mobile. Here’s what we have done:
在正确的图像上，我们对样式进行了一些更改，以使其在移动设备上更好地工作。 这是我们所做的：
Rearranged the grid so that it’s stacked vertically instead of across two columns.
重新排列网格，使其垂直堆叠，而不是跨两列。
Moved the entire layout a bit more up
将整个布局向上移动一点
Scaled the fonts down
缩放字体下来
In order to do this, we needed to change the following CSS:
为此，我们需要更改以下CSS：
h1 {
font-size: 30px;
}
#navbar {
margin: 30px 0;
}
#navbar a {
font-size: 30px;
}
.grid {
margin: 30px 0;
grid-template-columns: 200px 200px;
}More specifically, we needed to make the following adjustments inside of a media query:
更具体地说，我们需要在媒体查询中进行以下调整：
Reduce font size of the
h1to 20px将
h1字体大小减少到20pxReduce the margin above and below the
#navbarto 15px将
#navbar上方和下方的边距减少到15pxReduce the font size inside the
#navbarto 20px将
#navbar内的字体大小减少到20pxReduce the margin above the
.gridto 15px将
.grid上方的边距减少到15pxChange the
.gridfrom from two-columns to one-column将
.grid从两列更改为一列
Note: There is, of course, much more CSS in this application, even within these selectors. However, for the sake of this tutorial, I’ve stripped away everything which we aren’t changing in the media query. Check out this Scrimba playground to get the entire code.
注意：当然，即使在这些选择器中，此应用程序中也会包含更多CSS。 但是，出于本教程的考虑，我删除了媒体查询中所有未更改的内容。 查看此Scrimba游乐场，以获取完整的代码。
旧的方式 (The old way)
Doing all of this would be possible without CSS Variables. But it would require an unnecessary amount of code, as most of the bullet points above would need their own selector inside the media query, like this:
如果没有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;
}
}新方法 (The new way)
Now let’s see how this can be solved with CSS Variables. To begin with, we’ll rather store the values which we are reusing or changing inside variables:
现在，让我们看看如何使用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);
}Once we have this setup, we can simply change the values of the variables inside the media query:
设置好之后，我们可以简单地在媒体查询中更改变量的值：
@media all and (max-width: 450px) {
:root {
--columns: 200px;
--base-margin: 15px;
--base-font-size: 20px;
}This is much cleaner than what we had before. We’re only targeting the :root, as opposed to specifying all the selectors.
这比我们以前的清洁得多。 我们只针对:root ，而不是指定所有选择器。
We’ve reduced our media query from four selectors down to one and from thirteen lines down to four.
我们已经将媒体查询从四个选择器减少到一个 ，从十三行减少到四个 。
And this is just a simple example. Imagine a full-blown website where, for example, the --base-margin control most of the free spacing around the app. It’s a lot easier to just flip the value of it, as opposed to filling your media query up with complex selectors.
这只是一个简单的例子。 想象一个功能完善的网站，例如，-- --base-margin控制应用程序周围的大部分可用空间。 翻转它的值要容易得多，而不是用复杂的选择器填充媒体查询。
To sum up, CSS Variables are definitely the future of responsiveness. If you want to learn this technology once and for all, I’d recommend that you check out my free course on the subject on Scrimba.
综上所述，CSS变量绝对是响应能力的未来。 如果您想一劳永逸地学习这项技术，建议您阅读有关Scrimba主题的免费课程。
You’ll become a CSS Variables master in no time :)
您将很快成为CSS变量大师：)
Thanks for reading! I’m Per Borgen, front-end developer and co-founder of Scrimba. Feel free to reach out to me via Twitter if you have any questions or comments.
谢谢阅读！ 我是Perrimgen ， Scrimba的前端开发人员和联合创始人。 如果您有任何疑问或意见，请随时通过Twitter与我联系 。
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.
谢谢阅读！ 我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。 如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营 。
css 变量
扫一扫
1146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
