移动优先要求css基础样式默认适配手机，再用min-width媒体查询向上增强。避免max-width降级，防止交互遗漏、继承污染和断点混乱；字体用clamp()，图片设max-width:100%，布局按场景选择block、flex或grid。
移动优先不是口号，是写CSS时必须从 @media 的默认样式开始写起——所有基础样式（字体、间距、布局）都先适配手机，再用媒体查询向上增强，而不是反过来降级。
为什么不能先写桌面样式再加 @media (max-width: 768px)？
这种写法看似直观，但实际会埋下三类隐患：
- 容易漏掉移动端专属交互逻辑（比如触摸区域放大、点击反馈延迟取消）
- 桌面样式会污染移动端继承链，导致不得不写
!important或冗余重置 - 当断点增多（比如加了
480px、600px），max-width嵌套会让调试变得不可预测
@media (min-width: 768px) 是移动优先的起点
所有设备默认加载的是无媒体查询的 CSS，它必须是窄屏友好型。然后只在需要时，用 min-width 向上声明增强规则：
/* 基础：手机优先 */
.container { width: 100%; padding: 1rem; }
.grid { display: block; }
.item { margin-bottom: 1rem; }
<p>/<em> 平板及以上 </em>/
@media (min-width: 768px) {
.container { max-width: 720px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); }
}</p><p>/<em> 桌面 </em>/
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); }
.item { margin-bottom: 0; }
}</p>
关键点：
- 不写
@media (max-width: 767px)—— 手机样式就是“无条件生效”的基准 - 每个
@media只负责“新增能力”，不撤销已有行为 - 断点值直接对应真实设备常用宽度（如
768px是 iPad 竖屏最小宽度），别凭空捏造
字体和图片的移动优先处理
这两项最容易被忽略，但直接影响首屏渲染和可读性：
- 字体大小用
rem或clamp()，例如font-size: clamp(1rem, 2.5vw, 1.25rem);，避免小屏文字过小、大屏文字过大 - 图片必须设
max-width: 100%+height: auto，否则在 iOS Safari 中可能溢出容器 - 不要依赖
background-size: cover做响应式图——它会裁剪，移动端应优先保证主体完整，可用contain或换图
Flex/Grid 在移动优先中的实际取舍
不是所有布局都适合用 Grid 写移动端：
- 单列流式内容（文章、列表）直接用
display: block最轻量，别硬套grid - 需要换行对齐的按钮组、标签云，用
display: flex; flex-wrap: wrap;比 Grid 更可控 - Grid 真正发力点在中屏以上（如平板横屏、桌面），此时才用
grid-template-areas控制模块顺序
最常被忽略的一点：移动优先的“优先”不等于“只做手机”，而是把手机作为设计基线——它决定了你第一行 CSS 写什么，也决定了你什么时候该加断点、加什么规则。一旦基线松动，后续所有适配都会变成打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
