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