UniApp 的 rpx是什么，跟rem比呢？

2026年1月19日 10:42

吃透 UniApp 的 rpx：一套代码适配多端的核心秘诀

在 UniApp 开发中，“适配” 永远是绕不开的话题。从手机到平板，从 iOS 到 Android，不同设备的屏幕尺寸和像素密度千差万别，如何让界面元素在所有设备上都显示得恰到好处？rpx（responsive pixel）就是 UniApp 为我们准备的 “适配神器”，今天就带你彻底搞懂 rpx 的使用逻辑，以及它和 px、rem 的核心区别。

一、先搞懂：rpx 到底是什么？

rpx 是 UniApp（基于微信小程序）推出的响应式像素单位，核心设计目标是 “一键适配多端”，它的底层逻辑非常简单：

UniApp 规定，所有设备的屏幕宽度都被固定为750rpx（无论实际物理宽度是多少）。比如：

iPhone6/7/8（物理宽度 375px）：750rpx = 375px → 1rpx = 0.5px
iPhone6/7/8 Plus（物理宽度 414px）：750rpx = 414px → 1rpx ≈ 0.552px
安卓 1080p 屏幕（物理宽度 360px）：750rpx = 360px → 1rpx = 0.48px

简单说，rpx 会根据设备屏幕宽度自动换算，你只需要按 750px 的设计稿直接写数值（设计稿 100px = 代码 100rpx），无需手动计算适配比例。

1.1 rpx 的基础使用

在 UniApp 中，rpx 可以直接用在所有支持样式的地方（style 属性、css/scss 文件），用法和 px 完全一致：

<template>
  <view class="container">
    <!-- 行内样式使用rpx -->
    <view style="width: 375rpx; height: 100rpx; background: #409eff;">
      占屏幕宽度50%的盒子
    </view>
    <!-- 类样式使用rpx -->
    <view class="btn">按钮</view>
  </view>
</template>

<style scoped>
.container {
  padding: 20rpx;
}
.btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx; /* 字体也推荐用rpx */
  background: #67c23a;
  color: white;
  text-align: center;
  border-radius: 40rpx;
}
</style>

1.2 rpx 的使用注意事项

不要用于字体的极端场景：虽然字体可以用 rpx，但如果设计稿要求 “不同屏幕字体大小变化幅度小”，建议搭配upx（UniApp 扩展单位，和 rpx 逻辑一致）或动态计算。
避免嵌套过深的百分比 + rpx 混合：比如父元素用 rpx，子元素用百分比，容易出现适配偏差。
多端适配特殊处理：在 App 端（尤其是平板），如果需要更精细的适配，可以通过uni.getSystemInfoSync()获取屏幕宽度，手动调整 rpx 换算比例。

二、正面刚：rpx vs px vs rem

为了更清晰理解 rpx 的优势，我们把这三个最常用的单位放在一起对比：

特性	rpx（响应式像素）	px（物理像素）	rem（根元素像素）
核心逻辑	基于屏幕宽度 750 等分	固定像素，与设备无关	基于根节点（html）字体大小
适配性	自动适配多端，无需计算	固定尺寸，适配性差	需手动设置根字体大小适配
使用场景	UniApp / 小程序多端开发	固定尺寸元素（如 1px 边框）	H5/web 端适配
计算复杂度	0（直接用设计稿数值）	高（需按不同屏幕换算）	中（需配置根字体）
跨端支持	UniApp 全端支持	所有端支持	H5 支持，小程序 / App 需兼容

2.1 实战对比：同一个按钮的三种写法

需求：设计稿 750px 宽度，按钮宽度 200px，适配不同屏幕。

① rpx 写法（推荐）

.btn {
  width: 200rpx; /* 直接用设计稿数值，自动适配 */
  height: 80rpx;
}

② px 写法（适配性差）

/* 仅在375px宽度屏幕显示正常，其他屏幕会变形 */
.btn {
  width: 200px;
  height: 80px;
}

/* 如需适配，需手动媒体查询 */
@media screen and (width: 414px) {
  .btn {
    width: 224px; /* 200*(414/375) */
    height: 89.6px;
  }
}

③ rem 写法（UniApp 中需兼容）

/* 第一步：设置根字体大小（以375px屏幕为基准） */
html {
  font-size: 37.5px; /* 375/10，方便计算 */
}

/* 第二步：按钮样式 */
.btn {
  width: 5.333rem; /* 200/37.5 */
  height: 2.133rem; /* 80/37.5 */
}

/* 第三步：媒体查询适配其他屏幕 */
@media screen and (width: 414px) {
  html {
    font-size: 41.4px;
  }
}

从上面的对比能明显看出：rpx 写法最简洁，无需额外配置和计算，是 UniApp 开发的最优解。

2.2 什么时候不用 rpx？

rpx 虽好，但不是万能的，这两种场景建议换用其他单位：

1px 边框：rpx 无法精准表示 1px（比如在 2 倍屏上，1rpx=1px，3 倍屏上 1rpx≈1.5px），此时用 px 更合适。
H5 端极致适配：如果 UniApp 项目主要面向 H5，且需要和现有 web 项目的 rem 适配逻辑统一，可选用 rem。
固定比例的图形：比如圆形头像（宽高比 1:1），可以用 rpx + 百分比组合，或直接用 vw/vh（UniApp H5 端支持）。

三、避坑指南：rpx 使用的常见问题

问题 1：设计稿不是 750px 宽度怎么办？

换算公式：目标rpx = 设计稿像素值 * 750 / 设计稿宽度。比如设计稿宽度 375px，按钮宽度 100px → 100*750/375=200rpx。

问题 2：App 端 rpx 适配偏差？

原因：部分安卓设备的屏幕密度计算差异。解决：通过uni.getSystemInfoSync()获取screenWidth，手动调整样式：

运行

``` javascript
onLoad() {
  const { screenWidth } = uni.getSystemInfoSync();
  // 计算实际rpx比例
  this.rpxRatio = 750 / screenWidth;
  // 动态设置样式
  this.btnWidth = 200 / this.rpxRatio;
}
```

问题 3：小程序端 rpx 和 px 混用导致布局错乱？

解决：统一单位体系，优先用 rpx，仅在特殊场景（如 1px 边框）用 px。

总结

rpx 是 UniApp 多端适配的核心单位：基于 750px 屏幕宽度等分，无需手动换算，直接复用设计稿数值。
rpx vs px vs rem：rpx 适配效率最高（自动），px 适配性最差（固定），rem 需手动配置（适合 H5）。
使用原则：UniApp 开发优先用 rpx，仅在 1px 边框、H5 兼容等特殊场景换用 px/rem。

掌握 rpx 的核心逻辑，你就能摆脱 “适配焦虑”，真正实现 UniApp“一套代码，多端运行” 的核心优势。与其在不同设备的适配中反复调试，不如从一开始就选对单位，让开发效率翻倍

阅读视图