viewport 标签必须完整设置 width=device-width、initial-scale=1.0、maximum-scale=1.0、user-scalable=no 四个参数，缺一不可；rem 基准需 js 动态计算，媒体查询应采用 min-width mobile first，flex/grid 尺寸须响应式或弹性处理。
viewport 标签配错，页面在 iPhone 上文字小得看不清、横向滚动条甩不掉——这不是 CSS 写得不好，是 viewport 没设对。所有适配问题，先从这行代码开始排查。
viewport meta 标签必须写全这四个参数
只写 width=device-width, initial-scale=1.0 是常见错误。它在部分安卓低版本浏览器或微信内置 WebView 中仍会触发默认缩放，导致布局错位。
-
width=device-width：让视口宽度等于设备物理宽度（不是像素，是 CSS 像素） -
initial-scale=1.0：避免 iOS Safari 启动时自动缩放到“适合整页”模式 -
maximum-scale=1.0：禁用双指放大后无法恢复的 bug（尤其在表单聚焦时） -
user-scalable=no：防止用户误操作触发缩放，破坏 rem 或 flex 布局比例
完整写法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">。别省略任何一项，尤其别用 target-densitydpi——它已在 Android 4.4+ 被废弃，且 Chrome 和 Safari 完全不识别。
rem 基准根字体大小不能硬编码
写死 html { font-size: 100px; } 看似方便，但实际设备屏幕宽度千差万别，iPhone SE（375px）、iPhone 15 Pro Max（430px）、华为 Mate 60（393px）——统一用 100px，会导致小屏字过大、大屏字过小。
必须用 JS 动态计算：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
这里除以 7.5 是因为设计稿通常为 750px 宽，1rem = 100px 对应 750px 设计稿；若设计稿是 375px，就该除以 3.75。注意：这个脚本要放在 里或 DOMContentLoaded 前执行，否则页面会闪动。
媒体查询别只写 max-width，优先用 min-width + Mobile First
很多人习惯写 @media (max-width: 768px) { ... } 来适配手机，结果在 iPad Pro（分辨率 2048×2732）上反而被误判为“小屏”，样式错乱。
正确做法是 Mobile First：默认样式按最小屏（320–375px）写，再用 min-width 逐级增强：
@media (min-width: 768px) { /* 平板 */ }
@media (min-width: 1024px) { /* 桌面 */ }
这样能避免高 DPR 设备（如 iPhone 14 Pro 的 3x 屏幕）因设备像素比干扰导致的断点误判。同时，min-width 更符合浏览器解析逻辑，兼容性更稳。
Flexbox 和 Grid 布局中，flex-basis 和 grid-template-columns 别用固定 px
写 flex: 0 0 200px 或 grid-template-columns: 200px 200px 在多尺寸屏幕上必然崩。200px 在 iPhone SE 上占满屏，在折叠屏上只是一条缝。
推荐组合写法：
- 用
flex: 0 0 calc(100vw / 3.75)（对应 375px 设计稿）替代固定 px - 用
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))让列宽自适应，不溢出 - 关键容器加
box-sizing: border-box，避免 padding 把 width 帐算错
记住：移动端没有“固定宽度”这回事，所有尺寸单位要么响应式（rem、vw），要么弹性（flex、grid），要么靠 JS 动态算——三者混用时，务必确认执行顺序和触发时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
