移动端适配比例失调的核心解法是正确设置viewport并结合rem动态适配：先用width=device-width和initial-scale=1.0固定视口，再通过js按设计稿基准（如750px）动态设置html根字体大小，css中统一使用rem单位，并用env(safe-area-inset-top)等处理刘海屏安全区域。
移动端适配比例失调，核心问题往往出在视口设置和单位选择上。用好 viewport 和 rem，能从根本上解决不同屏幕下元素“忽大忽小”“布局错位”的问题。
确保 viewport 设置正确
很多比例失调，其实是页面被浏览器默认缩放干扰了。必须在 中写明标准 viewport 声明：
“`html
“`
重点是 width=device-width（让布局宽度等于设备物理宽度的 CSS 像素）和 initial-scale=1.0（禁用初始缩放）。漏掉任一关键项，rem 计算就可能失效。
动态设置根字体大小（html font-size）
rem 是相对于 html 根元素 font-size 的单位。要实现等比缩放，就得让这个值随屏幕宽度变化而变化。常用做法是按设计稿基准（如 750px 宽）等比计算：
立即学习“前端免费学习笔记（深入）”；
- 假设设计稿宽 750px，对应 rem 基准为 1rem = 100px（即 750 ÷ 7.5），那么 100px 就是「1rem」
- 在 JS 中监听
resize或DOMContentLoaded，执行：
“`js
function setRem() {
const baseWidth = 750;
const scale = document.documentElement.clientWidth / baseWidth;
document.documentElement.style.fontSize = scale * 100 + ‘px’; // 即 1rem = scale × 100px
}
setRem();
window.addEventListener(‘resize’, setRem);
“` - 注意：避免直接用
window.innerWidth，它可能包含滚动条宽度；优先用document.documentElement.clientWidth
CSS 中统一使用 rem 替代 px
一旦根字号动态生效，所有尺寸都改用 rem，就能自动适配：
- 按钮高 40px → 写成
height: 0.4rem（因为 1rem = 100px） - 字体大小 28px →
font-size: 0.28rem - 边距、圆角、阴影等全部同理换算
- 推荐用 vs code 插件（如 CSS Rem to Px）辅助转换，或构建时用 postcss 插件自动处理
补充：适配 iphone X 及以上安全区域
刘海屏/全面屏需留出安全边距，不能只靠 rem 缩放。用 CSS 环境变量增强兼容性：
“`css
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
“`
搭配 rem 使用，既保比例，又保体验。部分老机型不支持 env()，可用 @supports 做降级。
基本上就这些。viewport 定规矩，JS 动态调根字号，CSS 全用 rem，再加一点安全区兜底——比例就稳了。