媒体查询怎么写才不踩坑:从响应式断点到移动优先全讲透

响应式布局这件事,真正难的不是写 @media 这几个字,而是断点定在哪、用 min-width 还是 max-width、第一档样式先伺候手机还是先伺候桌面。这三个决定一旦做歪,后面整份样式表都会跟着别扭。这篇就把这几件事讲到能直接动手的程度。

常见设备断点该怎么定

没有一套断点是绝对正确的,但行业里有几组被反复验证过的值,直接沿用比自己拍脑袋稳得多。手机一般在 640px 以下,平板大致 768px 到 1024px 之间,桌面从 1024px 往上,大屏到 1280px、1536px 这一档。

主流框架其实给好了答案。Tailwind 的断点是 sm 640、md 768、lg 1024、xl 1280、2xl 1536;Bootstrap 5 从 sm 576 一路到 xxl 1400;Material 3 则是 medium 600 到 extra-large 1600。如果你的项目本来就在用 Tailwind,手写 CSS 的断点最好跟它对齐,否则工具类和自定义样式会在不同宽度换行,设计师审起来一脸困惑。想随时查 Tailwind 的断点和工具类对应,可以收藏 /zh/t/tailwind-cheatsheet/。

移动优先 vs 桌面优先

移动优先的意思是:不带媒体查询的基础样式先针对最小屏写好,然后每条 min-width 查询在视口变大时往上叠加。样式只增不减,层叠关系最好推理。桌面优先正好反过来,基础样式针对大屏,每条 max-width 查询在小屏上做减法。

为什么现代框架几乎都选移动优先?因为渐进增强省心,你永远在"加东西",不会出现"在大屏上又把小屏的样式抹掉"这种互相打架的情况。桌面优先目前主要出现在老项目和重打印的布局里。我的建议很直接:新项目一律移动优先,接手老代码再按它原有的策略走,别在一份样式表里两种混着用。

min-width 和 max-width 别混用

这是踩坑重灾区。同一份样式表里混用 min-width 和 max-width,极容易造出死区,也就是某个宽度区间谁都没命中,或者反过来被两条查询同时命中。

最经典的一个坑是这样:

@media (min-width: 768px) { ... }
@media (max-width: 768px) { ... }

正好 768px 的视口,这两条都满足,样式互相覆盖,结果全看谁写在后面。标准解法是把 max-width 减一个极小的值:

@media (max-width: 767.98px) { ... }

这个 0.02px 是跨浏览器能可靠区分的最小分数,Bootstrap 5 用的就是这个值。减掉它,缝就堵上了,每个视口宽度只命中一条查询。

一段真实可粘贴的骨架

下面是移动优先、对齐 Tailwind 断点的一份完整骨架,直接粘进样式表,把每档的规则填进对应的块就行:

/* base: 手机优先 */
.card { padding: 12px; }

@media (min-width: 768px) { /* 平板 md */
  .card { padding: 16px; }
}

@media (min-width: 1024px) { /* 桌面 lg */
  .card { padding: 20px; }
}

@media (min-width: 1280px) { /* 大屏 xl */
  .card { padding: 24px; }
}

注意它从小到大排列,后面的 min-width 自然覆盖前面的,这就是移动优先的好处:读起来像一条只往上走的台阶。

我自己的一个习惯

我以前手写断点全靠记忆,768 写成 786 这种错犯过不止一次,桌面优先那个减 0.02px 也老是忘。后来索性用 /zh/t/css-media-query-generator/ 把策略和框架选好,骨架直接吐出来,连暗色模式 prefers-color-scheme、降低动态 prefers-reduced-motion 这些一起带上,省了一堆查文档的时间。断点值想换 px 和 em,我会顺手开 /zh/t/px-rem-converter/ 算一下,em 断点能跟着用户字号缩放,对无障碍友好。

不只是 min-width

媒体查询能查的远不止宽度。暗色模式用 @media (prefers-color-scheme: dark),把暗色变量覆盖写进去,系统切深色时浏览器自动应用,一行 JavaScript 都不用。无障碍场景用 @media (prefers-reduced-motion: reduce) 把动画退化成静态,直接关掉一条 WCAG 问题。区分触屏和鼠标用 @media (pointer: coarse),给拇指放大点击区域。这些都是真实项目里要写的,值得一次性配齐。

把这三件事,断点、策略、min/max,想清楚再动手,响应式布局就从玄学变成了流程。剩下的就是把规则填进对应的块。

---

Made by Toolora · Updated 2026-06-13