前端尺寸单位总结
前端开发中对于标签元素的尺寸样式设置需要指定单位，如 px、em、rem、vh、rpx 等，本文将总结常用的前端尺寸单位及其使用场景。
一、概述
1. 所有单位及简述：
- px：像素 相对长度单位，相对于显示器屏幕分辨率(推荐使用)
- em：相对长度单位 基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
- rem：相对单位 可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
- vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
- vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
- vmin：vw和vh中较小的那个。
- vmax：vw和vh中较大的那个。
- %：百分比
- in：寸
- cm：厘米
- mm：毫米
- pt：point，大约1/72寸
- pc：pica，大约6pt，1/6寸
2. 分类：
- 绝对单位：px、in、cm、mm、pt、pc
- 相对单位：em、rem、%、vw、vh、vmin、vmax
3. 换算工具推荐：
VSCode 插件 px to rem
二、典型单位
1. px
px (pixel)，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。 有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的。这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无关。 px是PC端前端开发最常用的尺寸单位，也最简单直观、最容易理解，但移动端开发不建议使用。
物理像素：物理像素代表屏幕上有多少个像素点，如产品参数里“2340 x 1080 像素分辨率”指的就是设备像素，表示屏幕水平有1080个点，垂直有2340个点。 设备独立像素（也称逻辑像素，device-independent pixels，dips）：表示屏幕展示物体的视觉尺寸是多少（进行缩放操作之后），逻辑像素相同就表示希望按钮在不同屏幕上看起来一样大，是日常生活说的“调节分辨率”中的“分辨率”。 设备像素比（devicePixelRatio，dpr）： 指的是设备物理像素和逻辑像素的比例，PC端的设备像素比统一约等为1，移动端的设备像素比不确定且多样，这也是移动端开发不能使用px作为单位的根本原因。window.devicePixelRatio = 物理像素 / 设备独立像素 。 CSS像素（pixel，px）：CSS像素是指CSS文件中使用的像素，取决于设备独立像素与缩放比例，CSS像素 = 缩放比的平方个设备独立像素。
2. em
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。 为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px。这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的 px 数值除以 10，然后换上 em 作为单位就行了。
特点：
- em 的值并不是固定的
- em 会继承父级元素的字体大小
- em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
- 任意浏览器的默认字体高都是 16px
3. rem
rem 参考物是相对于根元素，我们在使用时可以在根元素设置一个参考值即可，相对于em使用，减少很大运算工作量，例：html大小为10px，12rem就是120px。
特点：
- rem单位可谓集相对大小和绝对大小的优点于一身
- 和em不同的是rem总是相对于根元素，而不像em一样使用级联的方式来计算尺寸
4. %
% 是相对于父元素的大小设定的比率，若设置display: fixed;则相对于可视窗口。
5. vw、vh
vw 和 vh 都是相对于视窗的单位，1vw等于视窗宽度的1%，1vh等于视窗高度的1%，即可视窗口高100vh、宽100vw。
6. rpx
rpx是微信小程序独有的、解决屏幕自适应的尺寸单位。可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为 750rpx。 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配。
三、总结
本文总结了前端开发中常用的尺寸单位，并对px、em、rem、vw、vh等单位进行了详细说明。希望对您有所帮助，尤其是您在移动端开发遇到rpx、rem或相对单位时，可以参考本文进行单位转换和使用。
参考文献：
