px em rem vh的使用

-绝对单位：px

-相对单位：rem,em,% ,vh,vw

px

像素，相对于屏幕的分辨率

em

参考父元素的font-size,具有继承性的特点，逐层影响(最终的参考是浏览器的字体大小或设置的字体大小)。浏览器默认是16px

一层：1.4em=1.416px=22.4px

二层：1.2em=1.21.41.6px

rem

相对的只有html根元素,可以避免字体大小逐层复合的连锁反应

一层：1rem=16px

二层：2rem=216px

vh

相对于视口高度，1vh=浏览器视口高度的1%，1vw=浏览器视口宽度的1%

视口宽度：

在桌面端，指的是浏览器的可视区域

移动端指的是布局视口

vmin:vh,vw中较小的一个

vmax:vh,vw中较大的一个

%

百分比，相对长度单位，相对于父元素的百分比

适用场景：

1.随着父容器或者整体页面布局而改变的尺寸，如元素的宽度，高度设置