直接写min-width断点容易错位，根本原因是视口宽度受缩放、地址栏遮挡、虚拟键盘等动态因素影响，并非固定像素值；应改用em/rem单位、基于内容撑满临界点设定断点，并搭配max-width做区间限定以防层叠干扰。
为什么直接写 min-width 断点容易错位？
多数人一上来就按设备尺寸设 @media (min-width: 768px)，结果在 iPad 横屏（1024×768）和某些 Android 平板（1024×800）上布局跳变不一致。根本原因是浏览器视口宽度（window.innerWidth）受缩放、地址栏遮挡、虚拟键盘弹出影响，不是固定像素值。
真正该依赖的是 CSS 视口单位和容器响应能力，而非硬编码设备像素。推荐做法：
- 用
em或rem定义断点，例如@media (min-width: 48em)（对应 768px，假设根字号为 16px） - 断点数值优先从设计系统出发，比如按内容撑满所需最小宽度来定，而不是“iPad 就是 768”
- 避免只用
min-width，搭配max-width做区间限定，防止层叠干扰：@media (min-width: 48em) and (max-width: 63.9375em)
栅格容器要不要用 display: grid？
要，但别全局替换 flex。Grid 适合二维布局（行列同时控制），Flex 更适合一维流式排列（如导航、卡片列表）。混用才是常态。
典型错误是给每个 .row 都套 display: grid，导致嵌套过深、track 计算混乱。正确姿势：
- 顶层容器用
display: grid划分主区域（header / main / sidebar / footer） - 内部子项如卡片列表仍用
display: flex+flex-wrap，更可控且兼容性好（IE11 不支持 Grid） - Grid 的
grid-template-columns用minmax()而非固定列数：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
grid-column 和 grid-row 在媒体查询里怎么改才不冲突？
直接在媒体查询里重写 grid-column: 1 / -1 很危险——它会覆盖所有之前定义的起止线，尤其当元素已有 grid-column: 2 / 4 时，1 / -1 会强制占满整行，破坏原有布局流。
安全做法是只覆盖需要变化的维度，保持其他轴不变：
- 横屏变纵屏时，只改
grid-template-rows，不动grid-template-columns - 用
grid-area统一管理位置，媒体查询中只重置grid-area值，语义清晰且不易覆盖错 - 避免在多个媒体查询里反复设置同一属性，提取成 class 如
.grid-span-full再切换
移动端真机调试时 @media 不生效的三个隐藏原因
Chrome DevTools 模拟器显示正常，但 iPhone 上空白或错位，大概率不是代码问题，而是：
- 漏了
<meta name="viewport" content="width=device-width, initial-scale=1">—— 没这句，iOS Safari 默认按 980px 渲染，max-width: 480px查询永远不匹配 - CSS 文件用了
rel="stylesheet" media="print"之类错误属性，导致样式表被忽略 - 构建工具（如 Webpack）把
@media后的空格或换行压缩掉了，变成@media(max-width:480px)，部分旧版 Android 浏览器不识别
真机验证前，先打开 Safari 开发者工具连 iPhone，看 computed 样式里是否列出了对应媒体查询规则——没出现，说明压根没加载或语法被吞了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
