网页响应超简单：有CSS变量我怕谁

学习如何用CSS变量创建下列响应

在创新的2018年，看看如何简单做成响应性的网站

如果你未曾听说过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);}

这样的语法看起来的确有点怪怪的，但如此一来，只要更改 变量，就能在整个应用中改变字号了。

如果你想把CSS变量学明白，可以在Scrimba网站 我的免费互动CSS变量课程 上查看。

该课程包含8个互动截屏。

或者，如果你想了解该课程的更多情况，也可以在下面的文章中大致了解一下将会学习什么：

还等什么，就来看看如何使用这项新技术轻松加愉快地建立起具有良好响应的网站吧。

所需要的设置

我们将为作品网站增加良好的响应性，就像下面这样：

从桌面计算机上看，还是不错的。但是，从下面左侧的图片可以看出，这种布局在手机上不太灵。

左图：在手机上一开始会是什么样子。右图：我们希望要什么样子。

重新安排了网格，使之纵向堆叠，而不是横跨两栏。

移动了整个布局，使之向上提了一点。

调整了缩放，将字号调小了。

为了做这些，需要更改如下CSS：

h1 {

font-size: 30px;}

#navbar {

margin: 30px 0;}

#navbar a {

font-size: 30px;}

.grid {

margin: 30px 0;

grid-template-columns: 200px 200px;}

更具体一点说，我们需要在媒体查询中做出下列调整：

➤将 的字号大小降低为20px。

➤将 上下的margin降低为 15px。

➤将 内部的字号减少为 20px。

➤将 上方margin降低为15px。

➤将 从两列改变为一列。

提示：当然，在这个应用中，甚至在这些选择器中，还存在很多其它的CSS，然而，在本课程中，我已经把媒体查询中的所有不需要改动的东西都去掉了。可以查看如下网站 this Scrimba playground 来获得完整的代码。

老办法

即使不使用CSS变量也可以把这些事情搞定。但会招致额外的大量代码，因为上面所有用黑圆点标记的项目都需要在媒体查询中拥有自己的选择器，像下面这样：

@media all and (max-width: 450px)

{

navbar {

margin: 15px 0; }

navbar a {

font-size: 20px; }

h1 {

font-size: 20px; }

}新办法

下面让我们来看如何使用CSS变量来解决这个问题。首先，要把我们将重复利用和更改的数值存储在变量的内部：

:root {

--base-font-size: 30px;

--columns: 200px 200px;

--base-margin: 30px;}

然后，在整个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);}

一旦进行了这样的设置之后，我们只要在媒体查询中简单地更改变量值就行了：

@media all and (max-width: 450px)

{ :root {

--columns: 200px;

--base-margin: 15px;

--base-font-size: 20px;}

这比我们以往的方法简便多了。只需盯住 ，而不必为所有的选择器指定值了。

我们已经把媒体查询从4个选择器减少到了1个以及从30行减少到4行。

这只是一个简单的例子。设想成熟的网站会是什么样子吧，例如，用 来控制APP四周的多数自由空间。想翻转其值也是很容易的事情，不必用复杂的选择器来填充媒体查询了。

总之，CSS变量绝对是提高响应速度时，所代表的未来。 如果你想一劳永逸地学会这种技术，我建议你查阅我的如下网站： Scrimba上该主题的免费课程。

很快你就会成为CSS变量的专家了 :)

来源：http://www.zcfy.cc/article/how-to-make-responsiveness-super-simple-with-css-variables

广告内容

关注我们