简述 rpx、px、em、rem、%、vh、vw的区别

设备物理像素

pt

屏幕宽/分辨率，其中每一小份就是1pt

css像素

px

pc机大屏幕显示器，1px约等于0.76个物理像素
手机小屏幕 以iPhone6为标准，物理像素750，分辨率375 1px=2pt
所以，px也是一个相对单位
px是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。
但是，因为手机屏幕大小不一，差异较大，所以，反而不希望一个元素在所有手机上显示一样大。而是希望能够自动等比缩放。所以，移动端不要用px
通常PC端大屏浏览器的网页，使用px单位较多
移动端少用，因为px的长度相对固定，无法根据大小不一的移动端设备自适应改变大小

rem

以网页根元素元素上设置的默认字体大小为1rem 默认1rem=16px
用的多

好处

可以实现响应式布局了！
响应式布局指的是元素大小能根据屏幕大小随时变化。
因为 所有以rem为单位的位置、大小都跟着根元素字体大小而变化。
所以只要在屏幕大小变化的时候改变根元素font-size就行了。

em

父元素的字体大小为1em
用的不多

rpx

小程序专用
以iPhone6为标准，物理像素750，分辨率375
无论屏幕大小，都将屏幕分成750份，每份就是1rpx。
1rpx=0.5px=1pt
优点
通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

vw/vh

CSS3 特性 vh 和 vw：
vh ，无论视口高度多少，都将视口高均分为100份，每1小份就是100vh，所以，也是相对单位，可随视口大小变化而自动变化。
vw ，无论视口宽度多少，都将视口宽均分为100份，每1小份就是100vw，所以，也是相对单位，可随视口大小变化而自动变化。
所以vw和vh，本质就是%
这里是视口指的是浏览器内部的可视区域大小

%

通常认为子元素的百分比完全相对于直接父元素，但是，不总是相对于父元素的对应属性值
子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位(默认定位)的父元素的高度
子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位(默认定位的)父元素的宽度
子元素的 padding/margin 如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的 padding/margin ，而与父元素的 height 无关。
因为%不总是相对于父元素的宽高或屏幕大小，所以，有坑，开发少用。