H5在PC端用rpx会“撑爆屏幕”是因为uni-app H5默认将rpx基准硬编码为375px（1rpx=0.5px），导致大屏下计算失准：750rpx可能仅占视口1/3或反向撑满全屏；需在manifest.json设"rpxCalculation": "auto"，并在onLaunch中用uni.addResizeListener（兼容window.addEventListener）重置根字号，配合page.json中"rpxCalcMaxDeviceWidth": 0等参数协同控制。
为什么H5在PC端用rpx会“撑爆屏幕”
因为uni-app H5默认把rpx基准硬编码为375px（即1rpx = 0.5px），哪怕你开着2560px宽的显示器，它仍按375px算——结果750rpx只占1/3视口，而font-size: 32rpx变成16px小得看不清；更糟的是，某些版本反而反向错判，把750rpx当成全屏宽度，直接撑满2560px，按钮大得离谱。
必须改manifest.json并监听resize
光改配置或光写JS都不行，必须两者配合：
- 在
manifest.json的"h5"节点下加："rpxCalculation": "auto" - 在
main.js或App.vue的onLaunch里注册重算逻辑：
uni.addResizeListener(() => {
document.documentElement.style.fontSize = '';
});注意：uni.addResizeListener在旧版H5运行时可能不存在，建议包一层try/catch，fallback到原生window.addEventListener('resize', ...)。
超宽屏（≥1920px）下rpx会失焦，得换思路
rpx本质是“等比缩放”，不是“智能适配”。当窗口拉到3840px，750rpx就等于3840px——文字、边距全失控。这时不能死守rpx：
- 布局容器（如侧边栏、主内容区）优先用
vw、%或flex，例如：width: calc(100vw - 300px) - 字号慎用大
rpx，改用rem+ 媒体查询，或JS动态设document.documentElement.style.fontSize - 局部间距可用
uni.upx2px()分段计算：const padding = windowWidth >= 1200 ? 40 : windowWidth >= 768 ? 30 : 20; -
<canvas>、fixed、absolute元素尽量避开rpx，它们对像素精度敏感，容易因四舍五入错位
别忽略page.json里的隐藏参数
page.json中"globalStyle"下的三个rpx相关配置会影响最终行为：
-
"rpxCalcMaxDeviceWidth": 0—— 设为0表示不限制最大宽度，让rpx始终按真实window.innerWidth算（推荐） -
"rpxCalcBaseDeviceWidth": 375—— 仅当maxDeviceWidth > 0且实际宽度超限时才启用，平时不起作用 -
"rpxCalcIncludeWidth": 750—— 指定哪些rpx值（如750rpx）强制走真实宽度计算，适合做全屏容器
这些参数不显眼，但一旦和manifest.json里的"rpxCalculation": "auto"冲突，就会让font-size反复重设或卡死在某个值上。
