移动优先是默认写小屏样式再用 min-width 增强，而非先写桌面版再用 max-width 覆盖；起点在 CSS 顶部，基础样式按手机竖屏设计，仅在内容需新布局时介入 min-width 断点；必须配 viewport 标签且避免嵌套媒体查询。
移动优先不是加个 @media 就算数
移动优先的核心是「默认写小屏样式，再用 min-width 增强」，而不是先写桌面版、再用 max-width 覆盖。很多人误以为只要写了媒体查询就是移动优先，结果代码里全是 @media (max-width: 767px)，这其实是桌面优先的逆向思维，容易导致样式冗余、覆盖混乱、调试困难。
真正移动优先的起点在 CSS 文件最顶部：所有基础样式（字体、间距、布局）都按手机竖屏设计，不依赖任何媒体查询。只有当屏幕变宽、需要新布局时，才用 @media (min-width: 768px) 等条件介入。
- 移动端默认用
flex-direction: column，平板开始切row - 字体默认
font-size: 16px，桌面端才升到18px或rem动态缩放 - 容器宽度默认
width: 100%，大屏才设max-width: 1200px居中
min-width 断点选多少？别硬套 iPhone 尺寸
断点不是设备型号清单，而是内容撑不开时的临界点。比如导航菜单从单行堆叠变成横向排列，不是“iPhone 6 宽度是 375px 所以断点设 375”，而是“当菜单项能并排显示且不换行时，宽度刚好够”。实际项目中，推荐用语义化断点而非设备像素：
-
@media (min-width: 768px)：适合平板竖屏，常用于切换两栏布局 -
@media (min-width: 1024px)：适合平板横屏或小桌面，适合网格列数增加 -
@media (min-width: 1200px)：适合主流桌面，可加侧边栏或固定最大宽度
避免用 min-device-width 或 max-device-width —— 它们检测的是物理分辨率，而用户可能缩放页面、开开发者工具、用分屏模式，min-width 检测的是视口宽度，更可靠。
立即学习“前端免费学习笔记（深入）”；
视口标签没加，@media 基本白写
如果 HTML 里没加 <meta name="viewport" content="width=device-width, initial-scale=1">，那所有 @media 查询在真机上大概率失效。浏览器会按桌面模式渲染（默认 980px 宽），然后把整个页面缩放到手机屏幕上——这时 min-width: 768px 永远不会匹配，因为视口宽度永远是 980px（缩放后视觉上小，但 CSS 认为它大）。
这个标签必须放在 <head> 最前面，且不能漏掉 initial-scale=1。常见错误包括：
- 只写了
width=device-width，忘了initial-scale=1，iOS Safari 仍可能双击放大 - 写了
user-scalable=no，影响可访问性，非必要别加 - 多个 viewport 标签冲突，后加载的会覆盖前一个
嵌套媒体查询和重复声明，性能与维护双崩
CSS 不支持真正的嵌套逻辑（除非用 Sass），所以不要写类似 @media (min-width: 768px) { @media (orientation: landscape) { ... } } 这种结构——它会被解析成两个独立条件，且难以调试。正确做法是合并条件：
@media (min-width: 768px) and (orientation: landscape) { ... }
另外，避免在每个选择器里重复写同一组媒体查询。比如：
❌ 错误写法：
.header { font-size: 18px; }<br>
@media (min-width: 768px) { .header { font-size: 24px; } }<br>
@media (min-width: 1024px) { .header { font-size: 28px; } }
✅ 推荐写法：把相关样式聚到一起，减少重复解析开销
.header { font-size: 18px; }<br>
@media (min-width: 768px) {<br>
.header { font-size: 24px; }<br>
.nav { display: flex; }<br>
}<br>
@media (min-width: 1024px) {<br>
.header { font-size: 28px; }<br>
.sidebar { display: block; }<br>
}
真正麻烦的从来不是怎么写断点，而是当设计改了三版、产品经理临时加了个“折叠屏横屏特殊样式”、QA 又反馈 Safari 在 iPad 上 orientation 判断失准时，你翻着几百行媒体查询找哪一行漏了括号或者单位写错了 px 还是 em。
