请解释移动端开发中常见的 1px 边框变粗问题的成因，并给出至少两种有效的解决方案。

回答思路

1. 【回答框架 1】1px 问题的根源在于设备像素比（DPR）。在 DPR 为 2 或 3 的高清屏上，CSS 的 1px 实际对应 2 或 3 个物理像素，但视觉上却显得比设计稿中的 1px 更粗，因为设计稿通常以 750px 宽度为基准，而 CSS 像素与物理像素存在换算关系。
2. 【回答框架 2】常见解决方案之一是使用 transform: scale(0.5) 或 scale(0.3333) 来缩放边框。具体做法是：为元素添加伪元素，设置 1px 边框，然后通过媒体查询针对不同 DPR 使用对应的缩放比例，使物理像素上恰好显示 1px。
3. 【回答框架 3】另一种方案是使用 rem 或 vw 进行动态计算。例如，在 750px 设计稿中，设置根元素字体大小为 100px，则 1rem 对应 100px，通过 JavaScript 或 CSS 的 vw 单位（如 1px = 100vw / 750）来动态计算边框宽度，使不同 DPR 下呈现一致。
4. 【回答框架 4】还有使用 box-shadow 模拟边框的方案：通过 box-shadow: 0 0 0 1px #000 实现，由于 box-shadow 的渲染不受 DPR 影响，在某些场景下可以避免变粗。但不推荐作为通用方案，因为其颜色和圆角支持有限。
5. 【回答框架 5】此外，可以使用 border-image 或 SVG 图片作为边框，通过 nine-patch 技术实现清晰边框，但维护成本较高。选择方案时需考虑兼容性、性能及维护成本，并注意在低版本浏览器上的回退处理。
6. 【关键点 1】1px 问题源于设备像素比（DPR）导致 CSS 像素与物理像素的不一致。
7. 【关键点 2】使用 transform: scale() 配合伪元素是主流方案，需针对 DPR 设置缩放比例。
8. 【关键点 3】基于 rem 或 vw 的动态计算方案可实现全局适配，但需引入脚本或计算。
9. 【关键点 4】box-shadow 和 border-image 也可用于模拟 1px，但各有局限。
10. 【关键点 5】实际工程中需结合项目兼容范围、性能要求和维护成本选择方案。
11. 【易错点 1】使用 transform: scale 时如果未正确设置 transform-origin 或使用 border-box，可能导致边框位置偏移或宽度计算错误。
12. 【易错点 2】rem 方案依赖根元素字体大小，若动态设置不当会造成全局字号异常，注意使用 postcss-px-to-viewport 等工具链简化。
13. 【易错点 3】box-shadow 模拟边框的颜色和圆角支持不佳，且可能影响性能，不适合复杂 UI。