请说明 postcss-px-to-viewport 在进行 H5 页面移动端适配时的具体用法与工作原理，包括配置项、实现方式以及可能产生的副作用。
考察说明
考查对 postcss-px-to-viewport 插件的理解与移动端适配方案的掌握程度。
回答思路
- 【回答框架 1】postcss-px-to-viewport 是一个 PostCSS 插件，作用是在构建阶段将 CSS 中的 px 单位自动转换为 vw 单位，从而实现不同屏幕宽度下的等比缩放。其基本原理是读取每个样式声明中的 px 值，按照视口宽度（如 750px）计算出对应的 vw 值并替换。
- 【回答框架 2】核心配置项包括 viewportWidth（设计稿宽度，如 750）、unitPrecision（转换后小数位数，保证精度）、minPixelValue（小于该值的 px 不转换，避免 1px 等边界问题）以及 propList 和 selectorBlackList，用于指定哪些属性或选择器不进行转换。此外，可通过 mediaQuery 控制是否转换媒体查询中的 px。
- 【回答框架 3】使用时需要安装 postcss-px-to-viewport，并在 postcss.config.js 中配置插件及选项。注意该插件应在 CSS 处理流程中生效，且需与构建工具（如 webpack、Vite）配合，确保在 PostCSS 处理阶段执行转换。
- 【回答框架 4】该方案的优点是实现简单、无需运行时计算，能较好还原设计稿；缺点是 vw 单位与屏幕实际宽度强相关，在极端尺寸或横屏情况下可能出现偏差，且对非设计稿比例的屏幕适配有限。因此，常需配合 rem 方案或媒体查询进行优化。
- 【关键点 1】核心机制是构建时把 px 替换为 vw，实现视口等比适配。
- 【关键点 2】常用配置 viewportWidth 设为设计稿宽度，unitPrecision 控制精度。
- 【关键点 3】propList 和 selectorBlackList 可精细控制转换范围。
- 【关键点 4】无法应对所有屏幕，极端情况需补充其他适配策略。
- 【易错点 1】需注意 1px 边框等最小像素限制，minPixelValue 设置过小可能导致细线丢失。
- 【易错点 2】转换后可能产生小数 vw 值，影响渲染精度，需合理设置 unitPrecision。
- 【易错点 3】不适用于需要等比缩放的非移动端场景，且对 iframe 等内部页面适配不佳。