学习如何用CSS变量建立网页响应布局 — css var()

在创新的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

<ul class="item">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

老方法：

在之前即便不使用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);
        }
    }
}

查看效果

新方法

下面让咱们来看如何使用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;
  }
}

查看效果

这比咱们以往的方法简便多了。只需盯住 :root，而没必要为全部的选择器指定值了。

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

总之，CSS变量绝对是提升响应速度时，所表明的将来。

做者： w3cbest前端开发
互动： 若有疑问可 进群讨论 本文原创，著做权归做者全部。商业转载请联系@w3cbest前端开发得到受权，非商业转载请注明原连接及出处。