前端不同尺寸单位的区别和使用

前言

一直搞不懂pc端、移动端、小程序、不同设备适配 要使用不同的单位表示不理解，今天，我就磕到底整明白它！

以下内容来自于作者：茧君

前端常见的尺寸单位

常见单位有：px、rpx、em、rem、%、vw、vh、vm

一、px

px是像素单位，是指设备或图片中最小的一个点，它是一种相对长度，是相对于显示器屏幕分辨率而言的。不同的设备在大小宽高相同时，它们的物理像素大小也可能是不同的，物理像素越高的设备单位面积内存放的像素点就高，因此画面看起来更精细。通常情况下在pc端，css的px就接近于实际像素大小，但是在移动设备上，根据不同机型的分辨率大小，css中的一个px可能就会对应不同数量的物理像素点。

特点：网页设计的常用单位，也是基本单位，用px可以固定设置布局或元素的大小。

缺点：没有弹性，大小死板，使用多端的页面上时，无法做到适应效果，如果从pc端切向移动端时样式会乱掉，纯pc端不会出现这样的问题。

二、%

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

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

对于position：absolute就是相对于已经定位的父亲

对于position：fixed就是对于ViewPort（视图）

对于transform2D水平移动变化来说就是相对于自身

三、vh

vh是css3新增单位view height的缩写

vh指的是视图高度，vh类似于一种百分比的单位，他相对于视图的高度，将视图的高度分为100份，10vh也就是占用视图的10%

举例：900px高度的视窗 1vh=9px

四、vw

vw是css3新增单位view width的缩写，vw指的是视图宽度，和vh类似

五、vm

vm是css3新增单位，vm是在视图中选取 宽度和高度最小的那一个，然后像vw、vh一样将其分为100等份

举例：1200px宽 900px高 的视图就是 1vm=9px

六、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