媒体查询中样式冲突解决方案
在使用媒体查询时，可能会遇到样式冲突的问题，尤其是在媒体查询条件高度重叠时。在某些情况下，同一元素的多个媒体查询规则可能同时被应用，从而导致样式混乱。
以你给出的代码为例，当屏幕宽度刚好为 991px 时，"max-width: 991px" 和 "min-width: 991px" 媒体查询规则都会匹配，导致样式冲突。
为了解决这个问题，可以采用以下方法：
公共样式：
- 定义在媒体查询规则之外的样式将被视为公共样式，在所有媒体查询条件下都适用。
媒体查询子类别：
-
将媒体查询规则分为三种子类别：
- 大于给定断点的样式
- 小于给定断点的样式
- 等于给定断点的样式
避免嵌套媒体查询：
- 避免将媒体查询嵌套在另一个媒体查询中，这会增加样式冲突的风险。
精确匹配：
- 在涉及精确尺寸值（例如 991px）的媒体查询中，可以添加一个以该确切值作为条件的媒体查询规则。它将覆盖任何重叠的规则，确保其样式在该特定宽度下优先应用。
示例：
修改后的代码：
#demo { /* 公共样式 */
width: 100px;
height: 100px;
}
@media (min-width: 991px) { /* 大于 991px */
#demo {
border-style: solid;
border-color: red;
border-left-width: 10px;
}
}
@media (width: 991px) { /* 等于 991px */
#demo {
border-style: solid;
border-bottom-width: 10px;
border-color: black;
}
}在这种情况下，"width: 991px" 媒体查询规则确保在屏幕宽度等于 991px 时，只有该媒体查询的样式和公共样式被应用，而所有其他媒体查询样式都被覆盖。
