em,rem,vw,vh之间的区别

em

em是相对长度单位,它是基于父元素的字体大小。

当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(1em = 16px)。

如果自身定义了font-size按自身来计算,整个页面内1em不是一个固定的值。

rem

rem也是相对单位,但它相对的只是HTML根元素font-size的值。

vw,vh

vw 就是根据窗口的宽度,分成100等份,100vw就表示满宽,50vw就表示一半宽。(vw 始终是针对窗口的宽),同理,vh则为窗口的高度。

在pc端中,指的是浏览器的可视区域。
在移动端中,指的则是布局视口。

总结

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

em:相对父节点字体的大小。

rem:相对根节点html的字体大小来计算。

vh、vw:主要用于页面视口大小布局,在页面布局上更加方便简单。

猜你喜欢

转载自blog.csdn.net/weixin_46953330/article/details/123526050