移动端优先是默认样式必须真能在手机上运行，再用 min-width 逐级增强；基础样式写在最前面且不依赖媒体查询，viewport 标签必不可少，断点应基于内容而非设备尺寸。
移动端优先不是加个 @media 就算数，而是默认样式必须真能在手机上跑通，再用 min-width 逐级增强——否则你写的只是“伪移动优先”，真机一测就露馅。
基础样式必须写在最前面，且不依赖任何媒体查询
很多人把「移动端优先」理解成「先写一个 @media (max-width: 767px)」，这是典型倒置。真正的起点是 CSS 文件顶部的无条件规则：
-
font-size默认设为16px（非rem或em），确保小屏可读 -
width默认用100%，max-width留给大屏控制 -
flex-direction默认column，横向布局等断点再切row - 所有触摸目标（按钮、链接）默认
min-height: 44px、padding足够，不靠媒体查询补救
断点只用 min-width，且按内容撑开决定值
别抄「iPhone 6 是 375px 所以断点设 375」——设备像素和视口宽度不是一回事，而且用户可能缩放、分屏、开调试器。断点应基于内容是否还能舒适排列：
- 导航菜单开始能横排不换行？试试
@media (min-width: 680px)，而不是硬套 768 - 两栏卡片在竖屏下挤不开？那就从
620px开始切grid-template-columns: 1fr 1fr - 推荐语义化断点：
768px（平板竖屏）、1024px（平板横屏/小桌面）、1200px（主流桌面），但必须实测验证 - 绝对不要混用
min-width和max-width同一断点值，比如@media (max-width: 768px)和@media (min-width: 768px)，768px 这一刻两个都匹配，行为不可控
viewport 标签漏了，所有媒体查询基本白写
没这行，移动端浏览器会按桌面模式（通常是 980px 宽）渲染整个页面，然后缩放显示——这时 min-width: 768px 永远不会触发，因为视口宽度始终是 980px。
立即学习“前端免费学习笔记（深入）”；
- 必须加在
最前面：<meta name="viewport" content="width=device-width, initial-scale=1"> -
width=device-width缺失 → 强制 980px 渲染，max-width类断点全失效 -
initial-scale=1缺失 → 页面可能被缩放，导致视口宽度计算错乱 - 别加
user-scalable=no，iOS Safari 16+ 已限制其生效，还破坏可访问性
真正难的不是写多少断点，而是默认样式能不能让用户单手操作、不 zoom 就看清文字、滑动不卡顿——这些没法靠媒体查询补，得从第一行 CSS 就想清楚。
