1、vw、vh、vmax、vmin是CSS3中新增的视口单位(Viewport units)
vw 相对于视口的宽度,视口被均分为100单位的vw;1vw = 视口宽度的1%。
vh 相对于视口的高度,视口被均分为100单位的vh;1vh = 视口高度的1%。
vmax 相对于视口的宽度或高度中较大的那个,其中最大的那个被均分为100单位的vmax;选取vw和vh中最小的那个。
vmin 相对于视口的宽度或高度中较小的那个,其中最小的那个被均分为100单位的vmin;选取vw和vh中最大的那个。
vh/vw和%区别:%是相对于元素的祖先元素;vh/vw是相对于视口的尺寸。
兼容性:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome for android39支持
详见下图
2、calc() 是 css3提供的一个在css文件中计算值的函数:用于动态计算长度值。
- 需要注意的是,运算符前后都需要保留一个空格,例如:
calc(100% - 10px)
;
- 任何长度值都可以使用calc()函数进行计算;
- calc()函数支持 "+", "-", "*", "/" 运算;
- calc()函数使用标准的数学运算优先级规则;
兼容性见下图:
3、最后举个例子:
如calc(100vh - 20px) ,表示,浏览器窗口的高度减去20px的高度, calc() 一般用来对width和height进行响应式布局,也可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
延伸学习资料:
深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局