必须添加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，视觉比例保持一致。
用 min-width 和 max-width 拦住极端尺寸断层
纯 rem 或 % 在超小屏（如折叠屏内折态 280px）或超大屏（iPad Pro 1024px）下可能撑不开或挤成一团。得用媒体查询兜底。
常见安全区间写法：
@media screen and (max-width: 320px) {
html { font-size: 14px; }
}
@media screen and (min-width: 768px) {
.container { width: 750px; margin: 0 auto; }
}要点：
- 不要只写
max-width，也要设min-width，防止大屏拉伸失真 - 对固定宽度组件（如 banner 图、卡片栅格），用
max-width: 100%+width组合保形 - iPad 的
768px是逻辑像素，不是物理分辨率，可放心用
慎用 device-pixel-ratio 媒体查询做高清屏适配
有人想用 @media (-webkit-min-device-pixel-ratio: 2) 单独给 retina 屏放大图片，但实际问题很多：
- 安卓厂商实现不一，部分 Android 12+ 已弃用该写法
- CSS 中改
background-image的url()无法触发浏览器预加载，易闪白 - 现代做法是直接用
srcset+sizes让 img 标签自己选图，更可靠
如果真要 CSS 控制，优先用 image-set()：
.icon {
background-image: image-set(
url(icon.png) 1x,
url(icon@2x.png) 2x
);
}但注意：Firefox 目前仅支持带 -webkit- 前缀版本，Safari 16.4+ 才支持无前缀标准语法。
真正跨设备稳定的样式，靠的不是某一个“魔法属性”，而是 viewport 定基调、rem 做主干、媒体查询兜底线——三者缺一不可。最容易被忽略的是 resize 事件没监听，导致横竖屏切换时 rem 基准没更新，页面突然变小或撑出横向滚动条。
