媒体查询的匹配原理与冲突认知
核心原理：优先级、层叠与边界
在CSS的媒体查询中，页面样式的应用遵循匹配性、选择器的特异性、以及源顺序的最终覆盖三大规则。当屏幕宽度在不同的媒体查询条件之间产生冲突时，后声明的规则在特异性相同时覆盖前面的规则。这意味着同一选择器在多个符合条件的媒体查询中，只有最高优先级（也就是最后出现的）会生效。
此外，媒体查询的边界值要特别关注。max-width 规则表示“直到当前值为止的范围”，而 min-width 表示从某个值向上的范围。因此，991px 通常是一个典型的边界点，决定哪些查询会被触发。
/* 示例：不同边界下的覆盖关系 */
@media (max-width: 991px) { .panel { background: #f0f0f0; }
}
@media (min-width: 992px) { .panel { background: #ffffff; }
}
通过这个示例可以看到：当视口宽度落在边界之间时，边界条件的组合会影响哪些样式生效，而最终呈现取决于源代码中的顺序和具体的选择器。
屏幕宽度 991px 的边界特性
991px 边界的实际表现
当视口宽度正好是 991px 时，所有满足 max-width: 991px 的媒体查询都会生效；同时，若存在 min-width: 0、min-width: 991px 等条件，也可能同时生效，导致冲突。此时的实际呈现取决于 CSS 的层叠顺序和选择器的特异性。
为了确保可预测性，不要只靠边界值来组织断点，可以使用一个明确的区间范围，例如：
/* 区间定义：991px 在中间的覆盖关系 */
@media (min-width: 768px) and (max-width: 991px) { .nav { font-size: 14px; }
}
@media (min-width: 992px) { .nav { font-size: 16px; }
}
解决媒体查询冲突的策略
冲突类型与实战规则
常见的冲突类型包括：1) 相同选择器在相邻的媒体查询中重复定义同一属性，2) 媒体查询的边界交叉导致覆盖区域模糊，3) 使用通用选择器与类选择器混用时的特异性差异。最稳妥的做法是通过顺序、尽可能减少重复定义，以及把断点设在清晰的边界。
另外，尽量在一个特定区间内合并样式，避免在同一选择器上重复分散在多个媒体查询中。这样可以降低维护成本并减少不可预期的冲突。
/* 严格覆盖：同一区间内，按顺序写在一个区域内 */
@media (min-width: 0) and (max-width: 991px) {.card { padding: 12px; color: #333; }
}
@media (min-width: 992px) {.card { padding: 16px; color: #111; }
}
测试与调试技巧
在浏览器开发者工具中重现 991px 场景
开发者工具的设备模式可以模拟不同的屏幕宽度，选择设备像素比和缩放比例，确保你在 991px 时能看到实际渲染效果。
另一种方法是直接修改视口宽度，观察不同媒体查询对同一元素的影响，并记录最终渲染的 CSS 属性，以判断冲突来源。
/* 快速切换到 991px 视口检测 */
@media (max-width: 991px) {#header { display: none; }
}
@media (min-width: 992px) {#header { display: block; }
}
实战案例：一个简单导航条的响应式实现
一个简单导航在不同断点的行为
下面给出一个简单的导航条示例，演示在 991px 前后各自的样式改变，强调边界点以及覆盖的行为，并用注释和变量化来保证可维护性。
此处的代码体现了一个基本原则：在 991px 附近，使用明确的区间来切换样式，避免跨越边界的混乱。
/* HTML 结构示例：
*/
/* CSS 示例：在 991px 边界前后应用不同样式 */
@media (max-width: 991px) {.site-nav { background: #fafafa; }.site-nav ul { display: flex; gap: 8px; }
}
@media (min-width: 992px) {.site-nav { background: #fff; }.site-nav ul { display: flex; gap: 16px; }
}
