请列举移动端页面适配的常见方案，并分析每种方案的优缺点。

回答思路

1. 【回答框架 1】适配的本质是让页面在不同屏幕尺寸和分辨率下呈现合理布局与可读性。常见方案包括：viewport 适配、rem 适配、vw/vh 适配、媒体查询响应式布局、flexible 方案（动态 rem）以及近年主流的 rem 或 vw 结合 flexible 布局。
2. 【回答框架 2】viewport 适配：通过 meta viewport 设置布局视口宽度，配合固定宽度设计稿（如 750px）用 transform scale 缩放或百分比布局。优点是简单直接，适合以图片为主的页面；缺点是整体缩放会导致字体和间距失真，且不同机型边缘可能留白。
3. 【回答框架 3】rem 适配：基于根元素 font-size 动态换算，通常用 flexible.js 按屏幕宽度等比设置根字号，宽度变化时页面等比缩放。优点是可以等比还原设计稿，兼容性较好；缺点是字体和间距同时缩放可能不美观，且需要引入 JS 和转换工具。
4. 【回答框架 4】vw/vh 适配：直接使用视口单位，如 1vw 等于视口宽度的 1%，无需 JS。优点是相对简洁，性能好；缺点是较小尺寸时可能出现 1px 偏差，且与毫米等单位换算存在误差。
5. 【回答框架 5】媒体查询响应式：通过断点切换不同 CSS 样式，实现流式布局和弹性布局。优点是灵活度高，可针对不同设备定制体验；缺点是维护成本高，工作量大。实际项目通常组合使用，例如 rem+flexible 或 vw+媒体查询。
6. 【关键点 1】常用适配方案有 viewport 缩放、rem、vw/vh、媒体查询等，需根据项目场景选择。
7. 【关键点 2】rem 适配依赖根字号动态设置，vw 更简洁但注意小数精度。
8. 【关键点 3】现代方案常用 rem/vw 结合 flex 布局，媒体查询处理断点。
9. 【易错点 1】不要忽视 1px 边框在 Retina 屏的显示问题，需结合 transform scale 处理。
10. 【易错点 2】rem 适配中根字号设置不当会导致字号过大或过小，需注意最小字号限制。
11. 【易错点 3】纯 vw 适配在竖屏页面中可能导致字体过大，需配合 max/min 限制。