em,rem,px,rpx单位换算，你弄懂了吗？

一、在网页上面的换算

em与rem与px的换算

em公式

js 复制代码

em × 父元素字体大小 = px

js 复制代码

<!-- 父元素：字体 20px -->
<div style="font-size: 20px">
  <!-- 子元素：padding 1.25em -->
  <p style="padding: 1.25em">
    内容
  </p>
</div>

计算：

js 复制代码

1.25em × 20px = 25px
所以 padding = 25px

嵌套情况（多层父元素）

js 复制代码

<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基础公式

js 复制代码

rem值*根元素字体大小=px值

默认情况

浏览器根元素（<html>）的默认字体大小的16px。

所以

js 复制代码

1rem=16px

常见换算

快速换算方法

js 复制代码

rem 值 × 16 = px 值

或者

js 复制代码

px 值 ÷ 16 = rem 值

实际应用

js 复制代码

/* 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

如果根元素字体大小被改了

js 复制代码

html {
  font-size: 20px;  /* 不是默认的 16px */
}

那么

js 复制代码

1rem = 20px
1.25rem = 1.25 × 20 = 25px  (不是 20px 了)

三种单位的区别：

px(像素)-绝对单位

js 复制代码

px = 固定像素值，不会变化

em（相对父元素）

js 复制代码

em × 父元素字体大小 = px

rem（Root Em）- 相对根元素

js 复制代码

rem = 相对于根元素（<html>）的字体大小

二、在小程序中换算

rpx（responsive pixel）是微信小程序的响应式单位，不是标准css单位。

规则：

js 复制代码

屏幕宽度 = 750rpx

换算公式：

js 复制代码

1rpx = 屏幕宽度 ÷ 750

反过来

js 复制代码

1px = 750 ÷ 屏幕宽度 rpx

不同设备的换算

iphone6（基础设备）

js 复制代码

屏幕宽度：375px
1rpx = 375px ÷ 750 = 0.5px
1px = 2rpx

iPhone6 Plus

js 复制代码

屏幕宽度：414px
1rpx = 414px ÷ 750 = 0.552px
1px ≈ 1.81rpx

iPhone X

js 复制代码

屏幕宽度：375px
1rpx = 375px ÷ 750 = 0.5px
1px = 2rpx

快速换算（以iPhone6为基准）

常用换算

js 复制代码

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为基准设备。

js 复制代码

iPhone6/7/8
屏幕宽度：375px
屏幕高度：667px

设计稿标准

js 复制代码

设计稿宽度：750px（2倍图）
设计稿高度：1334px（2倍图）