关于uniapp中单位rpx的注意点

rpx和px之间的换算
问题复现
问题产生的原因
问题解决办法

rpx和px之间的换算

1rpx = 视口宽度 / 750 px

视口宽度： 浏览器窗口的逻辑像素宽度，浏览器视口最大化时的宽度就是显示器的分辨率宽度，如1920px。视口宽度的取值根据浏览器窗口的缩放而不同，最大值为显示器的宽度分辨率。

rpx和px对比

特性	px(像素)	rpx(响应式像素)
单位类型	绝对单位	相对单位
设计基准	无	固定屏幕宽度为750rpx
适配原理	固定值，不随屏幕变化	动态换算，随屏幕宽度等比缩放
核心公式	1px = 1个物理像素	1rpx = (设备视口宽度 / 750) px
显示效果	在不同屏幕上的物理大小不同（可能过小或过大）	在不同屏幕上占据屏幕的比例固定，视觉效果一致
主要用途	固定尺寸元素（如1px边框）、原生组件、PC端开发	绝大多数UI元素：宽高、间距、字体大小等

rpx 的核心机制是：它将所有设备的屏幕宽度统一划分为 750 份。在运行时，UniApp 会根据当前设备的实际屏幕宽度，动态计算 1rpx 等于多少 px。

实战转换：如何从设计稿得到 rpx 值？

在实际开发中，设计师通常会提供一份固定宽度的设计稿。你需要根据设计稿的宽度，将上面的 px 尺寸转换为 rpx。

元素的rpx值 = （750 / 设计稿的基准宽度） * 元素在设计稿中的px值

常见场景：

设计稿宽度为 750px：这是最理想的情况，1px 直接等于 1rpx，无需换算。

例如：设计稿上一个 100px 的按钮，代码中直接写 100rpx。
设计稿宽度为 375px (iPhone 6/7/8 标准)：这是另一种常见情况。

例如：设计稿上一个 200px 的按钮，换算后为 750 * 200 / 375 = 400rpx。

问题复现

源码index.vue如下

html 复制代码

<template>
	<view>
		<view class="abcd">
			abcdefg
		</view>
	</view>
</template>

<script setup>
</script>

<style lang="scss">
	.abcd {
		background: gray;
		width: 200rpx;
	}
</style>

浏览器视口缩小50%的宽度，效果如下：
浏览器视口全屏时的宽度，效果如下：

浏览器放大为全屏，灰色块的宽度反而变小了，这显然不合逻辑。

理论上灰色块的宽度应随浏览器视口的宽度等比例放大。

问题产生的原因

UniApp 为了优化 rpx 在宽屏设备（如 Pad 或 PC）上的显示效果，内置了一个保护策略：
当屏幕宽度小于等于 960px 时，rpx 会根据实际屏幕宽度进行计算，所以你看到的宽度变化是符合预期的。
当屏幕宽度超过 960px 时，rpx 会回退使用一个基准宽度（默认是 375px）来计算。这就是为什么一旦视口超过 960px，元素宽度反而"缩"回去了

所以，默认情况当浏览器宽度超过960px，rpx单位的基准宽度将不再是实际的宽度,比如：1024px （大于了960px)，而是375px。所以灰色块反而变窄了。

问题解决办法

在pages.json的globalStyle中增加一行："rpxCalcMaxDeviceWidth": 1920 // 或者 9999，根据需要设置

json 复制代码

	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"rpxCalcMaxDeviceWidth": 1920 // 或者 9999，根据需要设置
	}