一、postcss-px-to-viewport
原理 ：通过 PostCSS 插件将 CSS 中的 px 单位自动转换为 vw（视窗宽度百分比单位），实现元素尺寸随屏幕宽度等比缩放。
实现方式：
- 配置设计稿宽度（如
viewportWidth: 375），插件根据视窗宽度动态计算vw值。 - 例如：设计稿中
100px的元素，在375px宽度的设备上转换为26.666vw（即100/375*100vw）。
优势：
- 无需手动计算单位，适配代码自动化；
- 支持配置忽略特定类名（如
.ignore）不转换。
二、flexible.js / lib-flexible
原理 ：动态设置 <html> 元素的 font-size 作为 rem 基准值，页面元素使用 rem 单位实现等比缩放。
实现方式：
-
根据设备 DPR（设备像素比）和屏幕宽度，通过 JS 计算并设置
html的font-size。- 例如：屏幕宽度为
375px时，设置font-size: 37.5px，则1rem = 37.5px。
- 例如：屏幕宽度为
-
结合媒体查询或 JS 监听屏幕变化，动态调整基准值。
注意事项：
- 高 DPR 设备需单独处理字体大小（如
[data-dpr="2"]设置双倍字号）； - 需手动将设计稿
px转换为rem（可通过工具或插件辅助）。
三、vw + rem 混合方案
原理 ：结合 vw 的动态性和 rem 的灵活性，通过 CSS 预处理或插件实现单位转换。
实现方式：
- 使用
vw设置<html>的font-size（如font-size: 10vw），使1rem = 10% 视窗宽度； - 页面元素使用
rem单位，间接实现基于vw的适配8。
优势：
- 减少 JS 依赖，纯 CSS 实现；
- 兼容性较好，支持复杂布局场景。
四、媒体查询（@media） + rem
原理 ：通过预定义不同屏幕宽度的 rem 基准值，实现分段式适配。
实现方式：
-
为不同屏幕宽度区间设置不同的
html的font-size；- 例如：
@media (min-width: 375px) { html { font-size: 37.5px; } }。
- 例如：
-
页面元素使用
rem单位。局限性：
- 需维护多段媒体查询代码，适配精度较低；
- 适合简单页面，不推荐复杂项目。
总结对比
| 方案 | 核心单位 | 自动化程度 | 适用场景 |
|---|---|---|---|
| postcss-px-to-viewport | vw | 高 | 现代项目，Vue/React |
| flexible.js | rem | 中 | 兼容老项目，动态适配 |
| vw + rem | vw/rem | 中 | 纯 CSS 方案，中等复杂度 |
| 媒体查询 | rem | 低 | 简单页面，低精度需求 |
推荐选择：
- 新项目优先使用 postcss-px-to-viewport，适配流程自动化且维护成本低35；
- 老项目升级可沿用 flexible.js，逐步过渡到 vw 方案。