css单位 px em rem vw vh

px

px(像素) 相对长度单位 相对于显示屏幕的分辨率而言

em

em 相对长度单位 相对于父元素的font-size,如果父元素字体尺寸未设置,则相对于浏览器默认字体尺寸
em的值不固定,em会继承父元素字体大小

rem

rem 相对长度单位 相对于html根元素的font-size计算长度单位,如果没有设置,就会以浏览器默认的字体大小,一般是16px
优点是只需要设置根目录大小即可把整个页面成比例的调整,

vw vh

vw 相对视口的宽度 长度约等于视口宽度的1/100
vh 相对视口的高度 长度约等于视口高度的1/100

如:一个高300px 宽500px的div 其 vw = 5px vh = 3px

vmin vmax

vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值
如:一个高300px 宽500px的div 其 vmax = 5px vmin = 3px

上一篇:移动端布局之vw,em,rem的用法总结以及响应式布局原理


下一篇:vue3学习-网易云音乐移动端