媒体查询应按视口宽度递增顺序书写，避免倒序导致小屏应用大屏样式；推荐移动优先策略，基础样式在前，断点按min-width从小到大排列，并确保区间无缝衔接、无重叠或空隙。
媒体查询条件编写顺序错误，本质是 CSS 层叠规则被忽视导致的样式覆盖问题——后写的规则会覆盖先写的同权重规则，而断点若按“大屏→小屏”倒序书写，小屏设备反而会命中并应用大屏样式，造成响应式失效。
检查断点是否按从小到大顺序排列
这是最常见也最隐蔽的问题。例如写成：
@media (min-width: 1024px) { .box { width: 960px; } }@media (max-width: 768px) { .box { width: 100%; } }
表面看逻辑合理，但若这两条规则在 CSS 中**先写大屏、后写小屏**，且选择器权重相同，小屏设备仍会渲染大屏样式（因为大屏规则虽不匹配，但小屏规则在后，本该生效）；真正危险的是当两者都匹配时（比如 768px 宽度同时满足 min-width: 1024px？不满足，但若误写成 max-width: 1024px 就可能重叠），或因断点间隙留白导致无样式生效。
✅ 正确做法：始终按视口宽度**递增顺序**组织媒体查询，推荐使用移动优先策略：
- 基础样式（默认适配手机）直接写，不加
@media - 平板断点：
@media (min-width: 768px) - 桌面断点：
@media (min-width: 1024px) - 超大屏：
@media (min-width: 1440px)
验证浏览器实际匹配的媒体查询
别只看代码顺序，要确认浏览器到底执行了哪条规则：
- 打开开发者工具（F12），选中目标元素 → 切换到 Computed 面板
- 向下滚动，找到你关心的属性（如
width或background-color） - 点击右侧的“来源”链接（如
style.css:42），它会跳转到真正生效的那行 CSS —— 注意看是不是你预期的媒体查询块 - 如果跳转到了基础样式或别的媒体查询，说明顺序或条件没生效
避免断点区间重叠或留空
断点之间若有缝隙或交叉，会导致某些宽度下无样式或样式冲突：
- ❌ 错误示例：
@media (max-width: 767px)和@media (min-width: 769px)—— 768px 宽度被遗漏 - ❌ 错误示例：
@media (max-width: 768px)和@media (min-width: 768px)—— 768px 同时匹配两条，后写的生效，但逻辑混乱 - ✅ 推荐写法（无缝衔接）：
@media (max-width: 767px) { /* 手机 */ }@media (min-width: 768px) and (max-width: 1023px) { /* 平板 */ }@media (min-width: 1024px) { /* 桌面 */ }
确保媒体查询写在基础样式之后
CSS 是从上到下解析的，同权重下后声明者胜出。如果你把媒体查询写在基础样式前面，它很容易被后面的基础样式覆盖：
- ❌ 错误位置：
@media (max-width: 768px) { .header { color: blue; } }.header { color: red; }← 这条会覆盖上面的蓝色 - ✅ 正确顺序：
.header { color: red; }@media (max-width: 768px) { .header { color: blue; } }
顺便提醒：如果基础样式用了高权重选择器（如 div.container .header），响应式里也要用同等或更高权重（如 body .header），不能只靠顺序取胜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
