H5宽屏下rpx“缩成一团”是因默认基准固定为375px（1rpx=0.5px），需在manifest.json中设"h5": {"rpxCalculation": "auto"}并监听resize重算font-size。
宽屏下 rpx 不是“失效”，而是它仍按 750rpx = 当前设备逻辑宽度换算，而这个“逻辑宽度”在 pc 浏览器里默认卡死在 375px（h5 端），导致 750rpx 只撑开 375px —— 所以元素看起来严重偏小、错位、留白。这不是 bug，是设计机制，必须主动干预。
为什么 H5 宽屏下 rpx 会“缩成一团”
H5 端的 rpx 默认不读取浏览器实际视口宽度，而是硬编码为 375px 基准（即 1rpx = 0.5px），哪怕你开着 1920px 宽的 Chrome 窗口也照旧。这和小程序、App 端动态读取 screenWidth 的行为完全不同。
- 现象：写
width: 750rpx，结果只占半屏；font-size: 32rpx小得看不清 - 根本原因：
uni-app在 H5 模式下未启用响应式基准计算，document.documentElement.style.fontSize固定为37.5px - 影响范围：仅 H5（含 PC 浏览器、微信内嵌 H5），小程序和 App 端不受此限制
启用 auto rpx 基准：改 manifest.json + 监听 resize
必须显式告诉 H5 端：“别用 375，去读真实视口宽度”。这需要两步配合：
- 在
manifest.json的"h5"节点下添加："rpxCalculation": "auto" - 在项目入口（如
main.js或App.vue的onLaunch）中监听窗口变化并触发重算：uni.addResizeListener(() => {<br> // 触发 rpx 基准刷新（内部会重设 font-size）<br> document.documentElement.style.fontSize = '';<br>}); - 注意：
uni.addResizeListener在某些低版本 H5 运行时可能不可用，建议加try/catch并 fallback 到原生window.addEventListener('resize', ...)
避免在宽屏关键路径依赖 rpx
即使开了 "rpxCalculation": "auto"，在超宽屏（如 3840px）下，750rpx 会变成 3840px，字体/边距可能过大。这时 rpx 就不再是“万能单位”，需分层处理：
- 布局容器（如左右分栏）优先用
vw、%或flex，例如：width: calc(100vw - 300px)控制右窗体 - 文字字号慎用大
rpx，改用rem+ 媒体查询或 JS 动态设置html根字体 - 组件内间距、图标尺寸等局部适配，可用
uni.upx2px()结合uni.getSystemInfoSync().windowWidth分段计算：const padding = windowWidth >= 1200 ? 40 : windowWidth >= 768 ? 30 : 20; - 绝对定位、canvas、fixed 元素尽量不用
rpx，它们对像素精度敏感，容易因四舍五入错位
dynamicRpx 对宽屏 H5 无效，别混用
dynamicRpx 是专为小程序（微信/支付宝）设计的运行时 dpr 校准开关，配置在 manifest.json 的 mp-weixin 节点下。它对 H5 完全无作用 —— 如果你在 H5 项目里误开了它，既不生效，还可能干扰构建流程。
真正影响 H5 宽屏 rpx 行为的，只有 manifest.json → h5 → rpxCalculation 这一项，以及是否手动触发了基准刷新。其他任何“动态 rpx”相关配置，在 H5 场景下都是多余动作。
