mobile-first是默认写小屏样式、仅用min-width向上增强，而非先写桌面再用max-width降级；基础css须适配320px窄屏，viewport标签必须正确置顶，断点依内容撑开临界点设定。
Mobile-First不是加个媒体查询就完事
Mobile-First本质是代码书写顺序和样式默认值的决策：所有基础样式不写任何 @media，直接生效于最小视口（比如 320px）；大屏增强只用 min-width 向上覆盖。反例是先写桌面样式再用 max-width 降级——这叫“桌面优先”，会多加载冗余规则，且容易漏掉移动端关键约束。
常见错误现象：font-size: 16px 写在最外层，结果小屏文字撑破容器；display: flex 配合 flex-wrap: wrap 没设，小屏直接横向溢出。
- 基础样式必须能独立运行在窄屏上：宽度用
100%或max-width: 100%，避免固定px宽度 - 字体、内边距、按钮尺寸等都从最小可用值起步（如
font-size: 14px、padding: 0.5rem） - 媒体查询只做“增强”，不“重置”：不要在
@media (min-width: 768px)里写font-size: initial这类回退逻辑
断点怎么选：别硬套768px/1024px
断点不是设备像素值，而是内容“撑不开”或“太松散”的临界点。比如一个卡片列表在 375px 下勉强一列，到 480px 就能舒适排两列，那第一个断点就该设在 480px，而不是盲目用平板通用值。
实际项目中更可靠的依据是设计稿的布局变化节点，或通过浏览器 DevTools 的响应式调试反复拖动宽度观察内容折行、留白、可读性变化位置。
- 推荐起手只设 1–2 个断点：比如
@media (min-width: 480px)和@media (min-width: 1024px) - 避免“断点爆炸”：每个断点都加一套
margin/padding调整，会导致维护成本飙升 - 断点值统一定义为 CSS 自定义属性（
--breakpoint-tablet: 480px），方便全局调整
相对单位怎么用才不翻车
rem 和 % 是 Mobile-First 的骨架，但乱用反而破坏一致性。比如 font-size: 1.2rem 在根元素 font-size 未重置时，可能继承浏览器默认 16px，导致小屏文字过大；又比如 width: 90% 套在嵌套多层的 flex 容器里，容易因父级 padding 累计造成意外缩窄。
真正安全的组合是：rem 控制字号与间距（配合根元素动态设置），% 控制块级宽度，max-width 配合 margin: 0 auto 限制大屏内容过宽。
- 根元素
html { font-size: 100% }保持默认，避免全局缩放干扰 - 字号优先用
rem，但按钮内边距这类微调可用em（相对于自身字号） - 图片和视频必须加
max-width: 100%; height: auto;，否则%宽度下仍可能溢出
流体网格别只靠 grid-template-columns
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 看似万能，但在小屏下若容器本身被设了 min-width: 300px，就会强制横向滚动。Mobile-First 要求网格本身就得“可压扁”——列数可以变，单列宽度也得能收缩到合理下限。
更稳妥的做法是：小屏用单列 grid-template-columns: 1fr，断点后才启用多列；或者用 minmax(250px, 1fr) + gap 控制最小列宽，同时确保 gap 也用 rem 或 %。
- 避免在基础样式里写
grid-template-columns: 1fr 1fr—— 这等于默认双列，小屏必崩 - 使用
fr单位时，搭配minmax()是必须项，光写1fr 1fr无法响应缩放 - 测试时重点看 320px–414px 区间：这是真实手机主流宽度，不是模拟器里的“理想值”
真正难的不是写出能适配的代码，而是克制住给大屏加特效的冲动——很多所谓“高级交互”，在小屏触控下反而成了操作障碍。Mobile-First 的边界感，恰恰体现在哪些样式坚决不写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
