在创新的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
- item 1
- item 2
- item 3
- item 4
老方法：
在以前即使不使用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) {
.item {
flex-wrap: nowrap;
li {
background-color: #ffeead;
font-size: 100px;
height: 500px;
width: calc(100% / 4);
}
}
}
See the Pen CSS media by w3cbest.com (@w3cbest) on CodePen.
新方法
下面让我们来看如何使用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;
}
}
See the Pen CSS Variables by w3cbest.com (@w3cbest) on CodePen.
这比我们以往的方法简便多了。只需盯住 :root，而不必为所有的选择器指定值了。 这只是一个简单的例子。设想成熟的网站会是什么样子吧，例如，用 –base-margin 来控制APP四周的多数自由空间。想翻转其值也是很容易的事情，不必用复杂的选择器来填充媒体查询了。 总之，CSS变量绝对是提高响应速度时，所代表的未来。
（LTR）对应关系如下：
第二个选项允许您为所选元素触发一个状态，这样您就可以看到当它处于活动状态、悬停状态、焦点状态时应用的样式。 
正如你所看到的，文字围绕着圆形流动，但我们实际上看不到任何形状。将鼠标悬停在Developer Tools中的元素上，将向我们显示正在设置的实际形状。 
此时，你可能会认为可以给元素 background 设置颜色或者图片就能看到形状了。我们来试一下。
我们可以清晰地看到文本在它周围环绕，但是元素本身并没有形状。如果我们想要真实地显示形状函数，就必须使用 clip-path 属性。clip-path 采用许多和 shape-outside 相同的值，所以我们可以给它相同的circle()值。
除了 radius，形状函数可以使用 at 定位。默认位置是圆的中心，因此 circle() 也可以被显式设置为 circle(50% at 50% 50%) 或 circle(100px at 100px 100px)，这两个值分别是水平和垂直位置。 为了搞清楚 position 的作用，我们可以设置水平位置值为 0 来创造一个完美的半圆。
ellipse() 和 circle()的区别在于，ellipse有两个半径rx和ry，即x轴半径和y轴半径。因此，上述例子也可以写成:
我们可以看到矩形是内嵌的，文本忽略了内嵌区域。 
inset() 形状也可以使用 round 参数接收 border-radius，并且文本会识别圆角，就像本例中所有边都是 25px 内嵌和 75px 圆角。
像 padding 或 margin 简写，inset 值以顺时针方式（inset(25px 25px 25px 25px)）接收 top right bottom left，并且只传一个值将使四条边都相同（inset(25px)）。 
polygon() 形状函数的一个有趣用法是文本内容可以在两个或以上形状中环绕。因为 polygon() 形状是如此灵活和动态，这给我们制作真正独特的杂志式布局提供了一个最好机会。在本例中，我们将把文本放在两个多边形中。
显然，想要手动创造你自己的复杂形状是非常困难的。幸运的是，你可以用一些工具来创建多边形。Firefox 有一个内置的形状编辑器，你可以在 Inspector 中通过点击多边形使用。 
目前，Chrome有一些可以使用的扩展，比如
因为我使用了透明背景的星星图像，所以文本知道哪些区域是透明的，哪些区域是不透明的，并相应地对自己进行自适应布局。
我们可以看到渐变在不透明和透明的中心完美地对角线分割。
我们来看看上面例子发生了什么？当你点击了链接(在打开的 document中)，浏览器会打开这个页面。而这个页面中运行了一段 JavaScript代码：通过 window.opener来修改原始页面(你来自的那个页面)。有点乏味但是这可能是有害的。 那么问题来了：我们如何阻止这种情况的发生呢？在所有使用 target=”_blank”打开新页面的链接上，加上 rel=”noopener”。