CSS媒体查询样式冲突及991像素宽度失效问题详解
在CSS媒体查询中，样式冲突问题时有发生，尤其是在断点宽度处。本文以991像素宽度为例，分析并解决媒体查询冲突导致样式失效的问题。
案例中，一个div元素的样式通过媒体查询在不同屏幕宽度下调整。当屏幕宽度为991像素时，max-width: 991px和min-width: 991px两个媒体查询同时生效，导致border-color: black;样式失效，出现样式混乱。
根本原因在于CSS媒体查询的匹配机制。min-width和max-width定义的是一个范围，当屏幕宽度正好为991像素时，同时满足这两个条件。浏览器会应用多个媒体查询的样式，从而产生冲突。 因此，区分公共样式、大于991像素的样式、小于991像素的样式以及等于991像素的样式，对于解决此类冲突至关重要。
立即学习“前端免费学习笔记（深入）”；
解决方案：精确匹配媒体查询
为了避免冲突，建议使用精确匹配的媒体查询方式，即使用width属性直接指定宽度。 例如，使用@media (width: 991px)来精确定义991像素宽度的样式。这样，只有该媒体查询的样式在991像素宽度下生效，避免了与其他媒体查询样式冲突。
改进后的CSS代码：
@media (width: 991px) {
/* 针对991像素宽度的样式 */
#demo {
border-style: solid;
border-bottom-width: 10px;
border-color: black; /* 此处样式生效 */
}
}
通过精确匹配，确保了991像素宽度下只应用针对该宽度的样式和公共样式，其他范围的样式不会生效，从而有效避免了媒体查询样式冲突，并实现了预期的样式效果。 这确保了不同屏幕宽度下CSS样式的正常工作，避免了范围重叠导致的样式混乱。
