移动优先需从首行CSS按手机屏编写并添加viewport元标签，默认样式适配小屏，断点依内容崩坏位置设定，避免嵌套媒体查询与滥用vw/vh，Flex/Grid在小屏应退化为单列布局。
移动优先不是加个 @media 就算数，而是从第一行 CSS 开始就按手机屏写，否则所有断点都可能失效。
viewport 元标签没加，其他全白搭
这是最常被跳过的一步，但直接决定后续所有媒体查询是否生效。没有它，移动端浏览器会把页面当成 980px 宽桌面站缩放渲染，@media (min-width: 768px) 实际匹配的是缩放后的视口宽度，不是设备真实宽度。
- 必须在
<head>里加：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 不要写成
user-scalable=no或maximum-scale=1.0—— 这会禁用用户双指缩放，违反 WCAG 可访问性要求 - 如果用了框架（如 Bootstrap），确认它没覆盖或遗漏这个标签；某些 CMS 模板会默认删掉它
基础样式不写媒体查询，才是真移动优先
所谓“移动优先”，是指默认样式（无 @media 包裹）就是为最小屏（比如 320px–480px）写的。所有增强逻辑都通过 @media (min-width: ...) 向上叠加，而不是反过来写 desktop-first 再用 max-width 覆盖。
- 容器宽度用
width: 100%或max-width: 100%，别写死width: 960px - 字体用
rem或em，比如font-size: 1rem（对应 16px），再在大屏里放大 - 栅格列数默认设为 1 列，例如
.grid { display: grid; grid-template-columns: 1fr; }，平板才改成2fr 1fr - 图片强制约束：
img { max-width: 100%; height: auto; }—— 否则原始宽 1200px 的图在 iPhone 上直接撑破容器
断点别硬套“常见值”，得看内容崩不崩
768px、992px、1200px 是参考值，不是标准。真正该设断点的地方，是文字换行错乱、按钮挤成一条线、图标重叠、留白消失的位置。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器 DevTools 的 device toolbar 拉动宽度滑块，眼睛盯着内容流，而不是数字
- 避免嵌套过多断点：
@media (min-width: 768px) { @media (min-width: 992px) { ... } }易出维护问题，平级写更清晰 - 慎用
vw/vh：比如font-size: 4vw在 iPhone SE 上会小到看不见，在 iPad Pro 上又过大，优先用clamp()或分段@media - 如果用 CSS 自定义属性统一管理断点，像
--breakpoint-md: 768px，记得所有地方都用var(--breakpoint-md)，别混用字面量
Flexbox/Grid 在小屏下反而要“退化”处理
很多人以为 Flexbox 和 Grid 天然响应式，其实不然。比如 display: grid; grid-template-columns: repeat(4, 1fr) 在手机上会强行分四列，文字极小、交互目标过窄，完全不可用。
- 小屏默认用
flex-direction: column或单列grid，让内容垂直堆叠 - Grid 的
auto-fit+minmax()可以替代固定列数，但需测试 Safari 旧版本兼容性（iOS 14.5 以下不支持minmax(300px, 1fr)） - 导航栏在小屏务必收进汉堡菜单，且 JS 控制的开关要绑定
aria-expanded和焦点管理，否则屏幕阅读器无法识别 - 表单控件别依赖
float或inline-block布局 —— 它们在小屏易换行错位，改用flex或grid配合flex-wrap: wrap
真正卡住人的，往往不是某个语法不会，而是默认样式没想清楚手机上第一眼看到什么、手指点哪、眼睛读哪——这些决定了断点在哪设、字体怎么变、栅格怎么塌，而不是反过来。
