mobile first 是以移动设备为默认设计基线，基础样式适配小屏，桌面端用 @media (min-width) 增量增强；不是先写手机再适配桌面，更非滥用 max-width 断点。
Mobile First 是什么，不是什么
它不是“先写手机样式再适配桌面”，而是把移动设备作为默认设计基线——所有基础样式都为小屏服务，桌面端用 @media (min-width) 增量增强。很多人误以为只要写了 max-width 断点就是 Mobile First，结果写出一堆覆盖逻辑混乱的 !important 和重复声明。
为什么 @media (min-width) 才是关键判断标准
浏览器解析 CSS 是从上到下、从左到右，样式表越靠后，权重越容易覆盖前面的。用 min-width 意味着：基础样式（无媒体查询）天然生效于所有设备；大屏规则只在满足条件时追加，不干扰小屏逻辑。反过来用 max-width，等于默认按桌面写，再不断“收缩降级”，极易漏掉某些尺寸的重置，导致按钮变小、文字挤出容器。
常见错误现象：
- 在
@media (max-width: 768px)里写font-size: 14px，但没在基础层设默认值，PC 端反而继承了更小字体 - 多个
max-width嵌套，断点交叠时样式意外叠加，调试时发现同一元素被三处不同规则修改
怎么写才真正符合 Mobile First 流程
核心就一条：所有非断点样式，必须能独立在 iPhone SE（320px 宽）上可用。之后每加一个 @media (min-width: ...)，只做“加法”——放大字号、增加内边距、改布局为 flex 或 grid、显示隐藏内容。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 基础层不写
width，用max-width: 100%配合box-sizing: border-box - 字体单位统一用
rem，根字号用html { font-size: 16px }起步，大屏再调高（如@media (min-width: 1200px) { html { font-size: 18px } }） - 图片优先用
srcset+sizes，而不是靠 CSSwidth强撑，否则小屏加载大图 - 避免在基础层写
display: none隐藏内容，改用visibility: hidden或移入 DOM 后再控制
示例片段：
/* 基础层：所有设备都走这里 */
.card {
padding: 1rem;
margin-bottom: 1rem;
}
<p>/<em> 仅在 >= 768px 时增强 </em>/
@media (min-width: 768px) {
.card {
padding: 1.5rem;
margin-bottom: 0;
display: inline-block;
}
}兼容性与性能上容易被忽略的点
IE11 支持 @media (min-width)，但不支持 rem 在 font-size 外的多数场景（比如 margin），若需兼容，基础层慎用 rem 做间距；现代项目则可放心用，但要注意 Safari 旧版对 clamp() 的支持不全，别用它替代断点。
性能影响很小，但真实坑在于：开发时习惯性在 Chrome DevTools 里切“Responsive”模式看效果，却忘了真机上 viewport 缩放、输入法弹起、横竖屏切换都会触发重排——这些没法靠断点模拟，必须真机测。
最常被跳过的一步：没在 里加 <meta name="viewport" content="width=device-width, initial-scale=1">。没有它，Mobile First 彻底失效，iOS Safari 会强行以 980px 渲染页面。
