跳到正文

选择插件

先看源 CSS 中出现的单位,再看运行时需要的目标单位。专用插件保留熟悉的 API;当一份样式需要多套转换规则时,使用 postcss-rule-unit-converter

转换矩阵

输入目标适合场景
rempx / rpxpostcss-rem-to-responsive-pixel已有 rem-to-pixel 流程和 Tailwind 输出
remvw / vhpostcss-rem-to-viewport基于 viewport 的响应式布局
pxrpx / rem / vwpostcss-pxtransweapp、H5、React Native、Quick App、Harmony
支持的单位pxpostcss-units-to-px需要可配置 unitMap 的简洁旧 API
支持的单位任意目标postcss-rule-unit-converter可组合规则、分组 preset、自定义转换
工具函数postcss-plugin-shared编写需要统一匹配和精度逻辑的插件

选择最小且稳定的 API

源单位和目标单位已经明确时,优先使用专用包。需要在一次 PostCSS 处理中混合 pxremrpxvwvh,或者需要复用转换策略时,再使用规则引擎。

下一步

先阅读接入 PostCSS,再打开具体插件页面查看完整选项和示例。

让 CSS 在不同屏幕之间稳定流动。