一、在网页上面的换算
em与rem与px的换算
em公式
em × 父元素字体大小 = px
<!-- 父元素：字体 20px -->
<div style="font-size: 20px">
<!-- 子元素：padding 1.25em -->
<p style="padding: 1.25em">
内容
</p>
</div>
计算：
1.25em × 20px = 25px
所以 padding = 25px
嵌套情况（多层父元素）
<div style="font-size: 20px"> <!-- 最外层父元素 -->
<div style="font-size: 18px"> <!-- 中间父元素 -->
<p style="padding: 1.25em"> <!-- 子元素 -->
内容
</p>
</div>
</div>
- 子元素的 1.25em 相对于直接父元素（中间 div）
- 1.25em × 18px = 22.5px
rem基础公式
rem值*根元素字体大小=px值
默认情况
浏览器根元素（<html>）的默认字体大小的16px。
所以
1rem=16px
常见换算
快速换算方法
rem 值 × 16 = px 值
或者
px 值 ÷ 16 = rem 值
实际应用
/* UnoCSS 类名 */
leading-5 → line-height: 1.25rem → 20px
p-4 → padding: 1rem → 16px
p-5 → padding: 1.25rem → 20px
w-10 → width: 2.5rem → 40px
如果根元素字体大小被改了
html {
font-size: 20px; /* 不是默认的 16px */
}
那么
1rem = 20px
1.25rem = 1.25 × 20 = 25px (不是 20px 了)
三种单位的区别：
- px(像素)-绝对单位
px = 固定像素值，不会变化
- em（相对父元素）
em × 父元素字体大小 = px
- rem（Root Em）- 相对根元素
rem = 相对于根元素（<html>）的字体大小
二、在小程序中换算
rpx（responsive pixel）是微信小程序的响应式单位，不是标准css单位。
规则：
屏幕宽度 = 750rpx
换算公式：
1rpx = 屏幕宽度 ÷ 750
反过来
1px = 750 ÷ 屏幕宽度 rpx
不同设备的换算
iphone6（基础设备）
屏幕宽度：375px
1rpx = 375px ÷ 750 = 0.5px
1px = 2rpx
iPhone6 Plus
屏幕宽度：414px
1rpx = 414px ÷ 750 = 0.552px
1px ≈ 1.81rpx
iPhone X
屏幕宽度：375px
1rpx = 375px ÷ 750 = 0.5px
1px = 2rpx
快速换算（以iPhone6为基准）
常用换算
1px = 2rpx
10px = 20rpx
20px = 40rpx
50px = 100rpx
100px = 200rpx
注意事项
1. rpx 只在微信小程序中使用
-
标准 CSS/HTML 不支持 rpx
-
UnoCSS 不支持 rpx
-
只在微信小程序、uni-app 等框架中使用
2. 不同设备换算不同
-
iPhone6：1px = 2rpx
-
iPhone6 Plus：1px ≈ 1.81rpx
-
安卓：1px ≈ 2.08rpx
-
设计稿宽度用 750px
-
设计稿中的 px 值直接作为 rpx 值使用
-
例如：设计稿 100px → 代码 100rpx
实际开发中的话，小程序以iphone6/7/8为基准设备。
iPhone6/7/8
屏幕宽度：375px
屏幕高度：667px
设计稿标准
设计稿宽度：750px（2倍图）
设计稿高度：1334px（2倍图）
