Rem布局通过动态设置根字体实现等比缩放，兼容性好但依赖JS；Viewport单位基于视口尺寸，纯CSS实现响应快但低端机型支持差；建议老项目用Rem，新项目优先选择Viewport或混合使用。
在移动端开发中，如何让页面在不同尺寸的设备上都能良好显示，是前端开发者必须面对的问题。Rem布局与Viewport单位（如vw、vh）是目前主流的两种适配方案，各有特点和适用场景。
Rem布局：基于根字体大小的弹性方案
Rem 是相对于根元素（html）字体大小的单位。通过动态设置 html 元素的 font-size，可以实现整体布局的等比缩放。
常见实现方式是结合 JavaScript 动态计算。例如，以设计稿宽度为 750px 为例，可将屏幕宽度划分为若干份，设置 html 的 font-size 为 屏幕宽度 / 10，这样 1rem 就等于页面宽度的 1/10。开发时，所有尺寸按 rem 单位书写，页面就能随屏幕变化等比缩放。
优点：
- 兼容性好，支持到 Android 4.4 和 iOS 8 以上
- 控制粒度细，适合复杂页面的精细化适配
- 配合 flexible 或手写 JS 脚本，可实现精准还原设计稿
缺点：
- 依赖 JavaScript 动态设置，存在 FOUC（内容闪现）风险
- 需要预处理单位转换，通常借助 Sass/Less 或 PostCSS
- 在极端屏幕下可能出现字体过小或过大问题
Viewport单位：原生支持的现代适配方式
Viewport 单位（vw、vh、vmin、vmax）是相对于视口尺寸的单位。1vw 等于视口宽度的 1%，1vh 等于高度的 1%。使用 vw 可直接实现宽度的百分比适配。
例如，设计稿为 750px 宽，一个元素宽 375px，则其宽度可表示为 50vw（375 / 750 = 0.5）。但更常见的做法是结合 CSS 计算函数 calc()，或通过 PostCSS 插件（如 postcss-px-to-viewport）自动转换 px 为 vw。
优点：
- 纯 CSS 实现，无需 JavaScript，加载更快
- 响应更及时，无脚本执行延迟
- 代码简洁，维护成本低
缺点：
实际选择建议
如果项目需要兼容较老的移动端系统，或者团队已有 Rem 方案积累，Rem 仍是稳妥选择。许多大厂早期 H5 活动页广泛采用 Rem + flexible 布局。
对于新项目，尤其是面向现代浏览器的应用、小程序或内部系统，推荐使用 Viewport 单位。结合 PostCSS 自动转换插件，可以保留用 px 开发的习惯，构建时自动转为 vw，提升开发效率。
也可以混合使用：用 vw 设置容器宽度，rem 控制字体和图标大小，兼顾灵活性与可读性。
基本上就这些。关键在于根据项目需求、目标用户设备分布和团队技术栈做出权衡。适配没有银弹，理解原理才能灵活应对。
