屏显度量单位 px / vw / em / rem 换算
时间：2026-5-1 9:16
浏览：7
一、px vw em rem 是什么
1. px: px 是在 css 中使用最为普遍的单位，px 是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的，是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但在移动端随着高分辨率屏的流行，分辨率提高了，css 中的 1px 并不等于设备的 1px。比如苹果三手机，分辨率是 320 × 480。苹果四手机，变成了 640 × 960，但是苹果四手机的实际屏幕尺寸并没有变化。这时候的1个 css 像素就是等于两个物理像素。
2. vw: 就是相对视口宽度 (Viewport Width)。1vw = 1% × 视口宽度。也就是说，一个视口就是 100vw。
3. em: 所有现代浏览器下，默认字体尺寸都是 16px，这时 1em = 16px。em会继承父级迟钝，也是相对单位。
4. rem: 是相对单位，相对于html的字体尺寸。
二、px、vw、rem 之间的换算
1. 我们假设Pad的设计稿是以 1920px 为标准的。那么：
1920px = 100vw
19.2px = 1vw
我们想要：100px = 1rem（这样方便我们在写代码的时候换算）
那么：100px = 100vw / 19.2 = 1rem
所以：1rem = 5.208vw
这时候，我们只要给html的根元素设置：
font-size: 5.208vw 即可。
2. 同理的，手机端我们假设设计稿是以 750px 为标准，那么：
750px = 100vw
7.5px = 1vw
我们想要： 1rem = 100px
那么：100px = 100vw / 7.5 = 1rem
那么：1rem = 13.33vw
1. px: px 是在 css 中使用最为普遍的单位，px 是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的，是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但在移动端随着高分辨率屏的流行，分辨率提高了，css 中的 1px 并不等于设备的 1px。比如苹果三手机，分辨率是 320 × 480。苹果四手机，变成了 640 × 960，但是苹果四手机的实际屏幕尺寸并没有变化。这时候的1个 css 像素就是等于两个物理像素。
2. vw: 就是相对视口宽度 (Viewport Width)。1vw = 1% × 视口宽度。也就是说，一个视口就是 100vw。
3. em: 所有现代浏览器下，默认字体尺寸都是 16px，这时 1em = 16px。em会继承父级迟钝，也是相对单位。
4. rem: 是相对单位，相对于html的字体尺寸。
二、px、vw、rem 之间的换算
1. 我们假设Pad的设计稿是以 1920px 为标准的。那么：
1920px = 100vw
19.2px = 1vw
我们想要：100px = 1rem（这样方便我们在写代码的时候换算）
那么：100px = 100vw / 19.2 = 1rem
所以：1rem = 5.208vw
这时候，我们只要给html的根元素设置：
font-size: 5.208vw 即可。
2. 同理的，手机端我们假设设计稿是以 750px 为标准，那么：
750px = 100vw
7.5px = 1vw
我们想要： 1rem = 100px
那么：100px = 100vw / 7.5 = 1rem
那么：1rem = 13.33vw
相关文章
本文没有标签
