移动端自适应首要确保viewport匹配设计基准宽度（如375px或750px），动态设置rem基准值并监听resize和orientationchange，媒体查询需基于逻辑像素断点，第三方库须禁用重复缩放逻辑。
viewport 设置必须匹配设计基准宽度
移动端自适应的第一道关卡不是写 CSS，而是 viewport 元标签是否真正生效。很多页面在 iPhone 上字体小、按钮挤成一团，根本原因就是 viewport 没对齐设计稿的基准宽度（比如 375px 或 750px）。
常见错误是只写 <meta name="viewport" content="width=device-width">，这会让浏览器按设备物理像素宽自动缩放，但不同设备的 dpr 和逻辑像素差异会导致 rem 计算错乱。
- 若设计稿基于 375px 宽（iPhone SE / iPhone 12 mini），应设
content="width=375, initial-scale=1, maximum-scale=1, user-scalable=no" - 若用 750px 设计稿（常见于 Sketch / Figma 输出），需配合 JS 动态计算缩放：
document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) * 100 + 'px'; - 切忌同时引入
lib-flexible和手动设置initial-scale—— 两者冲突会触发双重缩放，UI 元素直接缩小一半
rem 基准值不能硬编码为 100px
很多模板把 html 的 font-size 写死成 100px，看似方便，实则在大屏安卓机（如 1080×2160 屏）上导致文字过大、布局溢出。rem 的本质是“相对根元素”，它的值必须随视口宽度线性变化。
正确做法是用 JS 动态重设，且要监听 resize 和 orientationchange：
立即学习“前端免费学习笔记（深入）”；
(function() {
function setRem() {
const width = document.documentElement.clientWidth;
// 限定范围避免极端值
const scale = Math.min(Math.max(width / 375, 0.5), 2);
document.documentElement.style.fontSize = scale * 100 + 'px';
}
window.addEventListener('resize', setRem);
window.addEventListener('orientationchange', setRem);
setRem();
})();- 不监听
orientationchange→ 横屏时 rem 基准不变，布局崩塌 - 没加
Math.min/max限幅 → 折叠屏展开瞬间clientWidth超过 1000px，字体爆炸 - 用
document.body.clientWidth替代document.documentElement.clientWidth→ 获取的是内容区宽，不含滚动条，计算失准
媒体查询和 rem 必须协同，不能二选一
单纯靠 rem 只能解决字号和间距的等比缩放，但组件结构（比如卡片从单列变双列、导航从横向变汉堡菜单）必须靠媒体查询驱动。模板里常见的错误是：只写 @media (max-width: 768px)，却没考虑高 DPR 屏幕的实际逻辑像素宽度。
例如 iPhone 14 Pro 的物理分辨率为 1170×2532，但逻辑像素仍是 390×844 —— 所以媒体查询断点应基于逻辑像素，而非物理像素：
@media screen and (max-width: 375px) {
.card { width: 100%; }
}
@media screen and (min-width: 376px) and (max-width: 414px) {
.card { width: 50%; }
}- 断点写成
max-width: 768px→ 在 iPad 上误触手机样式，破坏桌面体验 - 用
device-width替代width→ 部分安卓浏览器不支持，导致媒体查询失效 - 忽略
hover状态 → 移动端无 hover，但某些 UI 组件（如下拉菜单）仍保留 hover 样式，造成触摸反馈异常
第三方 UI 库需主动关闭内部缩放逻辑
像 mint-ui、vant 这类库默认适配 375px 设计稿，并内置了 viewport 缩放脚本。如果你的模板已用 JS 控制 rem，再让它们重复执行缩放，结果就是组件尺寸被压缩 50% 甚至更小。
解决方案不是删库，而是抑制其初始化行为：
- 加载
vant前，在全局注入window.__FORCE_RENDER_VANT__ = false; - 使用
mint-ui时，跳过其flexible引入，改用你自己的 rem 初始化逻辑 - 检查库文档中是否有
usePx或disableScale类似配置项，优先启用
最易被忽略的一点：所有第三方组件的 px 单位样式（比如边框、阴影偏移）不会随 rem 变化，必须手动转为 rem 或用 vw/vh 替代，否则在大屏上会显得极细或极粗。
