前言

无意中看到一个面试题为px、em、rem的区别，正好借此将前端常见的尺寸单位整理出来，总结一下他们的用法和不同之初

前端那些尺寸单位

一般来说笔者见到的尺寸单位有一下几种px、rpx、em、rem、%、vw、vh、vm，接下来分别介绍这些尺寸单位

一、px

px像素 就是pixel的缩写

px是设备或者图片中最小的一个点，很多人认为css 中的 px 是一个绝对单位，代表的是屏幕中的一个物理像素点，实际上这种说话是错误的，css中的px是一个相对（抽象）单位是虚拟像素，因为不同的设备在大小宽高相同时，他们的物理像素大小也可能是不同的，物理像素高的设备单位面积内存放的像素点就高，因此画质看起来就更精细，通常情况下在pc端中，css中的px就接近于实际的像素大小，但是在移动设备上，根据不用机型的分辨率大小，css中的一个px可能就会对应不同数量的物理像素点

特点：网页设计的常用单位，也是基本单位，用过px单位可以固定设置布局或者元素的大小 缺点：没有弹性，大小死板，使用在多端的页面上时，无法做到适应效果，如从PC端切向移动端时样式可能会炸掉，但是纯pc端一般不会出现这样的问题

二、%

%百分比 顾名思义百分比的单位

%一般是相对于父元素为基础的，如给一个元素 margin-left 为百分比，他会寻找该元素的父元素以百分比形式计算 但是也有几点例外如：

对于position：absolute 就是相对于已经定位的父元素
对于position：fixed 就是对于ViewPort（视窗）
对于transform 2D水平移动变化来说就是相对于自身

三、vh

vh css3新单位 view height的缩写

vh指的是视窗高度 vh类似于一种百分比的单位，他相对于视窗的高度，将视窗的高度分为100份，10vh也就是占用视窗的10%
举例: 900px高度的视窗 10vh 就是 90px

四、vw

vw css3新增单位 view width的缩写 vw指的是视窗宽度 和vh类似 不做过多介绍

五、vm

vm css3新增单单位

vm是在视口中选取 宽度或者高度最小的那一个，然后想vw、vh一样将其分为100等份
举例: 1200px宽 900px高度的视窗 10vm 就是 90px

六、em

em 相对长度单位

em是相对于字体大小来计算的一个尺寸，他是字体大小的倍数、如em相对的字体大小为16px，那么1rem = 16px
使用em单位的元素如果自身设置了字体大小，那么就相对于自身计算，如果自身没有设置字体大小那么就会继承父元素的字体大小，如果父元素没有设置，就会依次向上寻找（因为字体大小是会被继承的），如果页面中没有设置字体大小，那么就会以浏览器的默认字体大小16px为基准

七、rem

rem css3新增相对长度单位

rem和em类似都是相对长度单位，但是rem只会相对于html根元素的字体大小，也就是说如果根元素字体设置为18px，那么全局内rem的值换算都为1rem = 18px

补充：

1. rem在制作响应式页面中经常使用到，因为我们可以根据不同的设备尺寸，去动态的调整根元素的大小，使用rem单位达到适配不同尺寸设备的效果，有些自适应的页面框架单位上的使用就是基于此种特性
2. 有时我们为了换算方便会将根元素的字体大小先设置为62.5%，然后根据需要进行调整，原因是62.5%*16px = 10px，此时也就是1rem = 10px

八、 rpx(upx)

rpx 响应式px单位

由小程序最先提出的响应式px单位，为了解决px在移动端上不同的机型极容易出现的变形问题

以uniapp对rpx的实现为例子：
uniapp规定屏幕的基准宽度为750rpx,开发者可以自己通过设计稿的基准宽度来计算页面的rpx值具体等于多少px
公式如下：

设计稿 1px /  设计稿基准宽度 = 框架样式1rpx / 750 rpx

也就是说 使用rpx单位元素的大小的计算公式为

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明：

1. 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx
2. 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx

注意：

1. rpx本质上是和宽度相关的单位，屏幕越宽实际像素值就越大，这是根据屏幕宽度缩放的单位，如果你不想根据屏幕缩放，那么不要使用rpx
2. 如果你的字体使用了rpx就需要注意了，你的字体也会跟着屏幕的宽度变化而变化
3. rpx不支持切换横竖屏时进行计算大小，因此如果你使用了rpx，建议锁定屏幕方向
4. 设计师可以用iPhone6作为视觉标准
5. 如果设计师的基础设计稿宽度不是750，每次我们手动计算就很麻烦，此时就可以开启upx配置，具体说明uniapp官网有解释，这里简单说明一下， upx是uniapp推出的单位，他可以和px进行等比转化，也就是说用户可以配置1px在uniapp编译时转化为1upx,但是upx是根据用户传入的基础设计图的尺寸向rpx转化的，也就是说用户不必再去计算如果设计稿不为750px，页面上元素应该计算为多少rpx了，开启upx转化后用户直接书写px，uniapp会直接将px转化为计算后的rpx