css3中calc、vw、vh、vmin、vmax 屬性的應用及兼容性詳解

1、 calc()的使用
什麼是calc()?

calc()從字面咱們能夠把他理解爲一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。好比說，你可使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。爲什麼說是動態值呢?由於咱們使用的表達式來獲得的值。不過calc()最大的好處就是用在流體佈局上，能夠經過calc()計算獲得元素的寬度。
calc()能作什麼？
calc()能讓你給元素的作計算，你能夠給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，好比說「width:calc(50% + 2em)」，這樣一來你就不用考慮元素DIV的寬度值究竟是多少，而把這個煩人的任務交由瀏覽器去計算。
calc()語法
calc()語法很是簡單，就像咱們小時候學加 （+）、減（-）、乘（*）、除（/）同樣，使用數學表達式來表示：

.elm {
width: calc(expression);
}
其中"expression"是一個表達式，用來計算長度的表達式。

calc()的運算規則
calc()使用通用的數學運算規則，可是也提供更智能的功能：

使用「+」、「-」、「*」 和 「/」四則運算；
可使用百分比、px、em、rem等單位；
能夠混合使用各類單位進行計算；
表達式中有「+」和「-」時，其先後必需要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
表達式中有「*」和「/」時，其先後能夠沒有空格，但建議留有空格。
瀏覽器的兼容性
瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都獲得較好支持，一樣須要在其前面加上各瀏覽器廠商的識別符，不過惋惜的是，移動端的瀏覽器對早期版本的兼容性不是太好。

 

 

你們在實際使用時，一樣須要添加瀏覽器的前綴

.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}

 

2、vw 、vh、vmin 、vmax 的使用
一、vw 、vh、vmin、vmax的含義
1，vw、vh、vmin、vmax 的含義
1，vw、vh、vmin、vmax 的含義
（1）vw、vh、vmin、vmax 是一種視窗單位，也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗（Viewport）大小來決定的，單位 1，表明相似於 1%。
視窗(Viewport)是你的瀏覽器實際顯示內容的區域—，換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。

（2）具體描述以下：
vw：視窗寬度的百分比（1vw 表明視窗的寬度爲 1%）
vh：視窗高度的百分比
vmin：當前 vw 和 vh 中較小的一個值
vmax：當前 vw 和 vh 中較大的一個值
二、vw、vh與%百分比的區別
（1）% 是相對於父元素的大小設定的比率，vw、vh 是視窗大小決定的。
（2）vw、vh 優點在於可以直接獲取高度，而用 % 在沒有設置 body 高度的狀況下，是沒法正確得到可視區域的高度的，因此這是挺不錯的優點。
三、vmin、vmax用處
作移動頁面開發時，若是使用 vw、wh 設置字體大小（好比 5vw），在豎屏和橫屏狀態下顯示的字體大小是不同的。
因爲 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這裏就能夠用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。
四、瀏覽器兼容性
（1）桌面 PC
Chrome：自 26 版起就完美支持（2013年2月）
Firefox：自 19 版起就完美支持（2013年1月）
Safari：自 6.1 版起就完美支持（2013年10月）
Opera：自 15 版起就完美支持（2013年7月）
IE：自 IE10 起（包括 Edge）到如今還只是部分支持（不支持 vmax，同時 vm 代替 vmin）

（2）移動設備
Android：自 4.4 版起就完美支持（2013年12月）
iOS：自 iOS8 版起就完美支持（2014年9月）

參考：https://blog.csdn.net/romantic_love/article/details/80868909