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的宽度。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

立即学习“前端免费学习笔记（深入）”；

解决方法是使用精确宽度匹配：

@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中的样式。