移动端优先的关键是默认样式先适配手机，再用min-width向上增强；基础样式写在媒体查询外，断点依内容临界点设定并严格升序排列，viewport标签必须正确配置。
移动端优先的关键不是“怎么写 min-width”，而是**默认样式先适配手机，再用 min-width 往上增强**。只要基础样式没包在任何媒体查询里，所有 min-width 规则都只负责“加功能”或“调布局”，小屏设备就不用加载、解析、丢弃一堆无用的大屏 CSS。
基础样式必须写在媒体查询外面
字体、间距、容器宽度、flex 方向这些通用规则，全部直接写在 CSS 文件最开头，不加任何 @media：
- 字体大小设为 16px（不是 18px 或 20px）
- 容器 width: 100%，不设 max-width
- 导航菜单默认 flex-direction: column
- 按钮 padding 和行高按触控需求设计（比如至少 44px 高）
min-width 断点要按内容临界点来设
别抄“iPhone 15 是 393px 所以断点写 400px”。打开浏览器开发者工具，拖动视口宽度，观察什么时候文字开始挤、卡片换行异常、图片溢出——那个宽度就是真实断点：
- 如果导航栏在 762px 刚好能横排不换行 → 用
@media (min-width: 768px) - 如果网格在 1015px 才能铺开四列 → 用
@media (min-width: 1024px) - 如果侧边栏在 1190px 才有足够空间 → 用
@media (min-width: 1200px)
断点顺序和写法必须严格升序+精简
CSS 层叠规则决定后写的同级样式会覆盖前面的。所以：
- 把
@media (min-width: 768px)放在最上面，@media (min-width: 1024px)放它下面，@media (min-width: 1200px)放最下面 - 每个媒体查询块里只写「需要改的属性」，比如默认 font-size 是 16px，那中屏只需写
font-size: 18px，别重复 color、line-height、margin - 绝对不要在一个 @media 里混用 and 和 not，也别嵌套在选择器内部（如
.box {@media...{}}是非法的）
viewport 标签是前提，漏了就全白搭
HTML 的 里必须有且仅有一条：
这条必须放在所有 CSS link 或 style 标签之前。如果写成 width=375、漏掉 initial-scale=1，或者被 JS 动态删掉，那 min-width 查询在真机上基本不会触发——浏览器会按桌面模式渲染，视口宽度固定在 980px 左右。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
