内容简介:在创新的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()》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 全局变量,静态全局变量,局部变量,静态局部变量
- python变量与变量作用域
- Python基础-类变量和实例变量
- python编程(类变量和实例变量)
- 03-Golang局部变量和全局变量
- 理解响应者和响应链如何处理事件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。