CSS3 自适应布局 vwwh 单位及 calc() 计算使用

视口单位 vw、vh

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的是Viewport中的Layout Viewport，视区所指为浏览器内部的可视区域大小，即 window.innerWidth/window.innerHeight大小，不包含任务栏标题栏及底部工具栏的浏览器区域大小。

1. vw：相当于视窗的宽度，整体为100vw，1vw等于视口宽度的1%
2. vh：1vh等于视口高度的1%
   vw、vh 相对于视口的宽度和高度，而不是父元素的(css百分比是相对于包含它的最近的父元素的高度和宽度)

css3 calc()属性动态计算

可以使用 calc() 给元素的border、margin、padding、font-size和width等属性设置动态值。
可以使用百分比、em、px和rem单位值计算出其宽度或者高度

# 语法
.el {
     calc(50% + 10px)
}

calc()的运算规则:

1. 使用 "+"、"-"、"*"、"/" 四个运算符
2. 可以使用百分比、px、em、rem等单位
3. 可以混合使用各种单位进行计算
4. 表达式中有运算符时，前后必须有空格 如： calc(50% + 5em)

兼容性写法：
-moz-calc(100% - 10px);
-webkit-calc(100% - 10px);
calc(100% - 10px);