css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

px:绝对单位,页面按精确像素展示

em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持


            注:chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把

            html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文

            章提到的将html的font-size设为10方便计算不是那么可取。


vw、vh、vmin、vmax 使用的前提是在移动端的前提下,

即首先申明个<meta>的缩放比例


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

vw:     viewpoint width,视窗宽度,1vw等于视窗宽度的1%。

vh:     viewpoint height, 视窗高度,1vh等于视窗高度的1%。



上面四个单位在各浏览器中的支持情况:


IE9+局部支持,

chrome/firefox/safari/opera支持,

iOS safari 8+支持,

Android browser4.4+支持,

chrome for android39支持

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容