3.3 rpx 跨端样式与 UI 框架选型

3.3 rpx 跨端样式与 UI 框架选型

本节导读：本节处理界面层的最后一关——像素如何落到不同宽度的屏幕上。先拆 rpx 的换算规则与失效边界（nvue 页面、原生导航栏），再谈样式隔离对换肤的影响，最后把 uView、uni-ui、ThorUI、ColorUI 四个主流 UI 框架放进同一张决策表，给商城这类项目一条明确的选型路径。

rpx 的换算账：一张设计稿为什么是 750

rpx 的规则一句话说清：任何设备上，屏幕宽度恒等于 750rpx。设计稿按 750 宽交付时，稿上量出的像素值原样写成 rpx 即可，编译器在运行期按实际宽度换算——375 逻辑宽度的设备上 1rpx 等于 0.5px，414 的设备上约等于 0.552px。这套机制把"多设备适配"压缩成一次单位选择，商城首页从设计稿到样式几乎可以誊抄：

/* 设计稿量出：卡片宽 340、内边距 24、标题字号 32、辅助文字 24 */
.card { width: 340rpx; padding: 24rpx; }
.card .name { font-size: 32rpx; }
.card .sub  { font-size: 24rpx; color: #8a8f99; }
​

但有两处必须收着用。边框与细分隔线：在部分设备上 1rpx 不足 1 物理像素，渲染成看不见或时有时无，分隔线用 1px 或者专门的 hairline 方案；正文字号：纯 rpx 字号在大屏设备上被等比放大、在小屏上缩得过小，阅读型界面建议正文字号用 px 固定，只有布局尺寸交给 rpx——"布局随屏缩放、文字保可读"是这条线的分工原则。此外 rpx 换算基于屏幕宽度，平板或折叠屏上横竖切换时布局会重排，宽表单、双栏列表这类界面要专门做断点处理。

图 3-3 rpx 换算与失效边界

样式隔离：换肤为什么进不了组件

小程序端自定义组件默认样式隔离：页面的选择器进不了组件内部，组件的类名也不会外泄。这与 H5 端"页面样式全局生效"的直觉相反，最常翻车的场景是运营要求"所有按钮换成节日红"——全局改 .btn 的颜色，H5 端立刻生效，小程序端组件内部纹丝不动。正确的换肤通道是两条：组件内部用样式变量（css variable）承接主题值，页面在根节点上改变量；或组件显式开启 styleIsolation: shared 让全局样式穿透，但共享模式会让组件样式互相污染，只适合自家业务的私有组件库，对外分发的组件库禁止共享。uni.scss 的全局变量是编译期注入的第三条通道，改主题色要重新编译才生效，适合品牌级常量而非运营级换肤。

四个主流 UI 框架的决策表

引不引框架、引哪家，决定后续两年的开发手感。把四个候选放进同一维度对比：

选型路径按三问推进。第一问：项目周期多长？ 商城这类要维护两年的业务系统，优先维护活跃度，uni-ui 与 uView 入围；ThorUI 适合愿意把组件源码纳入自家仓库深度改造的团队；ColorUI 更像样式积木，适合活动页快速拼装。第二问：端覆盖要求多全？ 要出鸿蒙或更多小程序端的，官方系 uni-ui 的全端跟进最稳。第三问：包体积敏感吗？ 小程序主包吃紧时，uni_modules 形态的按需打包是硬优势，整库引入的方案直接淘汰。三问过完，商城的结论是 uni-ui 打底、个别复杂交互引 uView 单个组件补充——混用不是禁区，但主题变量要统一到一处，别让两套色板打架。

⚠️ 引框架最常见的返工是"先引后换"：项目中期发现框架某个组件在目标端行为不符，换组件时把业务代码里的类名约定全带崩。对策在引入前做一次目标端的组件冒烟清单——把你确定要用的那十来个组件在真实目标端各渲染一遍再拍板。

混用单位的三条裁决规则

实际工程里 rpx 与 px 必然混用，给出三条裁决规则减少每次犹豫。规则一，跟随屏宽变化的尺寸用 rpx：容器宽、间距、圆角、图片盒；规则二，与屏幕物理呈现相关的用 px：边框、正文字号、图标线条粗细；规则三，单位换算不要手写魔法数字，需要 JS 侧换算时统一走 upx2px 一类的官方函数，把换算口径收敛到一处。还有一类高频问题值得回答：设计稿按 375 出图怎么办？团队约定统一让设计按 750 出图最省事；实在只有 375 稿，写样式时把量出的值乘二再写 rpx，并在评审时说明口径，避免一半人乘一半人不乘。单位混用看起来是小事，但界面走样的事故里，单位口径不一的占比常年排在前三。

一段"界面走样"的排查实录

用一段真实排查把本节要点串起来。反馈是"某款安卓机上商品卡片底部按钮被截断"。第一层查单位：按钮高度用了 rpx，该机型逻辑宽度偏小，rpx 值换算后不足按钮内容高度——把按钮高度改由内边距撑起，不写死高度，问题在该机型消失。第二层查框架样式：换了 UI 框架的按钮组件后样式异常，发现是框架的全局样式重置与项目里的通用样式叠加，选择器优先级压过了组件内部样式——按样式隔离一节的做法，把通用样式收敛到页面根级，组件内部交给组件自己。第三层复查边界：该页面后续要出 nvue 版本，把混用单位梳理成 px 与变量两条线，为迁移留好口子。整个排查一小时，三层各贡献一段经验：单位跟着内容走、隔离优先于穿透、迁移的账提前算。

本节要点回顾

• rpx 以 750 为恒定基准换算，布局尺寸放心用；边框细线与正文字号是两个例外区；
• nvue 页面与原生导航栏是 rpx 的失效边界，前者换算单位、后者看安全区；
• 小程序端样式默认隔离，换肤走样式变量或显式共享，禁用无脑穿透；
• UI 框架按维护活跃度、端覆盖、包体积三问筛，混用可行但主题必须统一；
• 引入前跑目标端冒烟清单，比中途换组件便宜得多。

界面层的积木、结构、样式都齐了。下一章进入页面的组织与流转：注册、跳转、栈管理与分包。