CSS3教程

cal

calc()从字面看我们可以把它理解为一个function函数。其实calc就是英文单词calculate(计算)的缩写；它是一个css3新增的功能，可以用来指定元素的长度，动态计算长度值。

// 使用SASS变量
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

还可以组合不同的单位，px、em、rem等单位都可以混在一起使用

.demo {
    width: calc(100% - 50px);

}

自适应单位vh vw

https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html 《你所不了解的七个css单位》这篇文章讲的很好，翻译自@Jonathan Cutrell的《7 CSS Units You Might Not Know About》著作权归作者所有。这个网站里的内容好像都挺不错的。

简单来说就是可视区域，移动端是不包含浏览器任务栏标题栏以及底部工具栏的浏览器区域大小。

根据CSS3规范，视口单位主要包括以下4个：

  1.vw：1vw等于视口宽度的1%。

  2.vh：1vh等于视口高度的1%。

  3.vmin：选取vw和vh中最小的那个。

  4.vmax：选取vw和vh中最大的那个。