必须添加viewport meta标签并结合rem动态适配与媒体查询兜底：设置width=device-width、initial-scale=1.0；用JS根据屏幕宽度动态设根字号；再用min/max-width处理极端尺寸。
用 viewport meta 标签控制页面缩放行为
移动端默认会将页面渲染为 980px 宽（类似桌面视口），再缩放显示，导致文字小、点击区域难触达。不加这个标签，width: 100% 或 rem 布局都会失效。
必须在 中写入：
其中关键点：
-
width=device-width是核心，让 CSS 像素宽度等于设备逻辑像素宽度 -
initial-scale=1.0禁止初始缩放，否则 iPhone 可能自动缩小整个页面 -
user-scalable=no非必需，但可避免用户误操作放大后布局错乱（尤其表单页）
用 rem + font-size 动态适配根字体大小
直接写 px 在不同设备上绝对尺寸不一致；用 % 或 em 又容易嵌套失控。最稳的跨设备字体/间距方案是 rem，但前提是根元素 font-size 要随屏幕变化。
立即学习“前端免费学习笔记（深入）”；
推荐 JS 动态设置法（兼容性好，比 CSS @media 更精细）：
function setRootFontSize() {
const width = document.documentElement.clientWidth;
const scale = width / 375; // 以 iPhone 6/7/8 的 375px 为基准
document.documentElement.style.fontSize = scale * 16 + 'px';
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);
这样写 CSS 就能自然响应：
.btn { padding: 0.5rem 1rem; font-size: 0.875rem; }
注意：1rem 此时 ≈ 实际像素值，且在 375px 屏上 = 16px，414px 屏上 ≈ 17.6px，视觉比例保持一致。
