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

栏目: CSS · 发布时间: 5年前

内容简介:在创新的2018年已经过去,在2019年看看如何简单做成响应性的网站如果你未曾听说过从本质上讲,

在创新的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) {
    :root {
        --base-font-size: 100px;
        --base-color: #ffeead;
        --height: 500px;
        --width: calc(100% / 4);
        --wrap: nowrap;
    }
    .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变量 绝对是提高响应速度时,所代表的未来。

查看效果


以上所述就是小编给大家介绍的《学习如何用CSS变量创建网页响应布局 — css var()》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

社群运营的艺术

社群运营的艺术

查尔斯·沃格 / 靳婷婷 / 华夏出版社 / 2017-7 / 42

社群存续的秘密,长期以来只有少数人知道,比如佛陀、耶稣及其弟子。 回溯3000年社群史,《社群运营的艺术》作者查尔斯•沃格总结了有归属感社群的七大原则。 在前互联网时代,七原则曾经造就伟大社群。在人人互联时代,应用七原则的社群将更繁荣。 本书作者耶鲁大学神学硕士查尔斯•沃格研究人类社会3000年的历史,结合个人亲身操作经历,提出了七条历经时间考验的原则:界限原则、入会原则、仪式原......一起来看看 《社群运营的艺术》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具