css中px em rem vw vh vmax vmin单位解析

px: 绝对单位,页面按精确像素展示。代表物理屏幕上能显示出的最小的一个点。

em: 相对单位,基准点为父节点字体的大小,继承父类字体的大小,相当于“倍”。浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值。

rem: 相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,继承根节点的属性(即标签)。

注: chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。

vw: viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
即当前可见宽度的1%=1vw,区别是:当div中没有内容时,width=100%,则宽度不显示出来;当div中没有内容时,width=100vh,则宽度依然能显示出来。

vh: viewpoint height,视窗高度,1vh等于视窗高度的1%。即当前可见高度的1%=1vh,区别是:当div中没有内容时,height=100%,则高度不显示出来;当div中没有内容时,height=100vh,则高度依然能显示出来。

vmin: vw和vh中较小的那个。
vmax: vw和vh中较大的那个。

注: vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Android browser4.4+支持,chrome for android39支持。

猜你喜欢

转载自blog.csdn.net/weixin_44242600/article/details/87776144