CSS媒体查询中991px断点样式冲突的有效解决方法
本文探讨CSS媒体查询中出现的样式冲突问题，并提供可靠的解决方案。问题根源在于min-width: 991px和max-width: 991px媒体查询在屏幕宽度为991px时同时生效，导致border-color: black;样式未能正确应用。
以下是一个导致冲突的代码示例：
#demo {
width: 100px;
height: 100px;
}
@media (max-width: 991px) {
#demo {
border-style: solid;
border-bottom-width: 10px;
border-color: black;
}
}
@media (min-width: 991px) {
#demo {
border-style: solid;
border-color: red;
border-left-width: 10px;
}
}
当浏览器宽度为991px时，两个媒体查询都匹配，造成样式冲突。这是因为max-width: 991px匹配小于等于991px的宽度，而min-width: 991px匹配大于等于991px的宽度。
立即学习“前端免费学习笔记（深入）”；
解决方法是使用精确宽度匹配：
@media (width: 991px) {
/* 针对宽度精确为991px的样式 */
#demo {
border-style: solid;
border-color: black; /* 或其他指定样式 */
border-width: 10px 0 0 0; /* 示例：仅设置底部边框 */
}
}
通过width: 991px，我们精确控制了991px宽度的样式，避免了min-width和max-width的冲突。 这确保了在991px宽度下只应用width: 991px媒体查询中的样式，以及公共样式，从而实现对不同屏幕宽度更精确的样式控制。 请注意，需要根据实际需求调整width: 991px中的样式。
