WXSS 和 CSS 有什么区别？rpx 的原理是什么？

简化版

WXSS 是小程序的样式语言，整体类似 CSS，但能力受小程序环境限制，并扩展了 rpx 等尺寸单位。rpx 是响应式像素，小程序规定屏幕宽度为 750rpx，因此元素会根据设备宽度自动换算成实际像素，常用于移动端适配。

详细版

WXSS 支持大部分常见 CSS 写法，比如选择器、盒模型、flex 布局等，但不支持所有浏览器 CSS 能力，也不能随意使用全局 DOM 选择器。

rpx 的核心是按屏幕宽度等比例缩放。设计稿如果按 750 宽设计，那么 1rpx 可以理解为设计稿上的 1px。不同设备上，小程序会自动换算成对应物理尺寸。

例如在 375px 宽的设备上，750rpx 等于 375px，100rpx 大约等于 50px。

使用 rpx 可以减少手动写媒体查询的成本，但并不是所有地方都适合。文字字号、边框、固定高度等场景要结合真实视觉效果判断。

完整版教学

一、WXSS 是什么

WXSS 可以理解为小程序版 CSS。它负责描述 WXML 的样式，支持常见布局能力，如：

• display: flex
• position
• margin / padding
• font-size
• background

同时，它也有小程序自己的特点。例如支持 rpx，支持样式导入，但运行环境不等同于完整浏览器，所以不能假设所有 CSS 特性都可用。

二、rpx 的换算逻辑

小程序把所有设备屏幕宽度抽象成 750rpx。换句话说：

实际 px = rpx * 屏幕宽度 / 750

如果屏幕宽度是 375px：

100rpx = 100 * 375 / 750 = 50px

如果屏幕宽度是 414px：

100rpx = 55.2px

所以 rpx 本质是按屏幕宽度比例缩放。

三、rpx 的适用场景

适合使用 rpx 的场景：

• 页面宽度。
• 图片尺寸。
• 卡片间距。
• 栅格布局。
• 与设计稿强相关的视觉尺寸。

需要谨慎使用的场景：

• 字体大小，过度缩放可能影响可读性。
• 1px 边框，换算后可能出现模糊。
• 固定高度容器，可能在小屏设备上压缩内容。

四、面试追问与工程落地

面试官可能问：“为什么设计稿通常按 750 宽出？”

因为小程序把屏幕宽度定义为 750rpx，设计稿按 750px 设计时，开发者可以几乎按数值直接写 rpx，降低换算成本。

工程中常用原则是：布局尺寸多用 rpx，文字大小可以根据项目规范选择 rpx 或 px。如果页面特别依赖可读性，比如正文、表单、长文本，字号不宜盲目随屏幕等比缩放。

五、逻辑像素、设备像素与取整

rpx 先换算为小程序布局使用的逻辑 px，再由设备像素比映射到物理像素。屏幕逻辑宽度为 375px 时 1rpx = 0.5px，若设备像素比 DPR=2，则约对应 1 个物理像素；同样的 1rpx 在其他宽度和 DPR 上可能发生取整差异。

屏幕逻辑宽度	100rpx 换算	750rpx 换算
320px	42.67px	320px
375px	50px	375px
414px	55.2px	414px

逻辑 px = rpx × windowWidth / 750
物理像素 ≈ 逻辑 px × DPR

这解释了细边框为什么可能模糊或粗细不一致：换算结果落在非整数物理像素边界时，渲染器需要抗锯齿或取整。不要用大面积固定高度强行等比缩放文本容器，字体换行、系统字号和安全区域都会让真实布局偏离 750 设计稿。

六、样式作用域、复用与适配策略

app.wxss 提供全局样式，页面 WXSS 作用于对应页面；自定义组件默认有样式隔离规则，外部样式不会像普通网页那样无条件穿透。需要跨组件定制时，优先使用组件公开的外部样式类、属性或明确的样式隔离配置，避免依赖偶然生效的深层选择器。

@import 可以复用变量化前的公共样式文件，但过度全局化会造成命名冲突和不可预测覆盖。组件样式还存在选择器与隔离边界限制，面试回答应强调“类似 CSS、并非完整浏览器 CSS 环境”，具体特性要结合基础库和组件模式验证。

设计令牌（颜色/间距）
        ├─ app.wxss：少量全局基础样式
        ├─ page.wxss：页面布局
        └─ component.wxss：组件内部 + 对外定制接口

适配时通常用 rpx 管整体网格、图片和间距，用 flex/grid 处理内容伸缩，用 px 或受控字号保证长文本可读，再通过真机覆盖窄屏、宽屏、横屏和安全区域。rpx 只解决按宽度比例换算，不会自动解决键盘顶起、刘海屏、横屏和无障碍字号。

记忆钩子：750rpx 是宽度换算尺，不是万能响应式方案；布局还要依靠内容流、弹性布局和设备边界测试。

七、常见误区与追问

• 误区：1rpx 在所有设备上都等于 0.5px。 只有 375px 逻辑宽度时才是该换算，其他屏宽按公式变化。
• 误区：rpx 最终直接等于固定数量的物理像素。 它先换算逻辑 px，再受 DPR 和渲染取整影响。
• 误区：把所有字号和高度改成 rpx 就完成响应式适配。 文本、系统字号、横屏和安全区域仍可能溢出或遮挡。
• 追问：为什么 750px 设计稿便于开发？ 设计稿数值可近似直接写成同数值 rpx，框架再按设备宽度换算。
• 追问：1px 细边框为什么在不同设备表现不同？ 逻辑尺寸映射到物理像素时可能不是整数边界，DPR、取整和抗锯齿会影响结果。
• 追问：组件外部如何安全定制内部样式？ 通过组件明确暴露的样式类、属性或样式隔离配置，而不是依赖任意全局选择器穿透。
• 追问：WXSS 与 CSS 的本质差异是什么？ 语法和布局能力相似，但运行在小程序组件、基础库和样式隔离体系中，支持范围与作用域不同。

八、加强记忆

rpx 用公式记：rpx × 屏幕逻辑宽度 ÷ 750 = px，再由 DPR 映射到物理像素，所以细线可能取整。WXSS 继承许多 CSS 思路，却受小程序基础库和组件样式隔离约束；工程上让 rpx 负责整体比例，让弹性布局和内容流负责变化，并在真机验证文字、横屏与安全区域。