前言
在创新的2018年已经过去,在2019年看看如何简单做成响应性的网站
如果你未曾听说过CSS变量,那么我告诉你,它就是CSS的一种新功能,可以让你拥有在样式表中使用变量的能力,这样做时并不需要什么特别的设置呦。
从本质上讲,CSS变量可以让你摆脱老式的样式设置:
h1 {
font-size: 30px;
}
navbar>a {
font-size: 30px;
}
复制代码
都9102年了,这样太low了 我们换种方式
: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变量创建响应布局
先来一段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);
}
}
}
复制代码
新方法
看看现在应该怎么做呢
: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;
}
}
复制代码
看着还是不错的 不过能写less或者scss就用那个吧 emm