CSS3 自適應布局 vw\wh 單位及 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 {
    width: calc(50% + 10px)
}

calc()的運算規則:

1. 使用 "+"、"-"、"*"、"/" 四個運算符
2. 可以使用百分比、px、em、rem等單位
3. 可以混合使用各種單位進行計算
4. 表達式中有運算符時，前后必須有空格 如：width: calc(50% + 5em)

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