CSS 媒体查询冲突：如何精准控制 991 像素断点样式？

CSS 媒体查询样式冲突解决方案

在宽度刚好等于 991 像素时，会出现媒体查询 min-width: 991px 和 max-width: 991px 部分样式同时生效的问题，导致样式混乱。理想情况下，应该有三种样式类型：

• 公共样式：任何时候都生效

• 媒体查询样式：根据屏幕宽度变化而修改样式，分为以下三类：

  • 大于 991 像素的样式
  • 小于 991 像素的样式
  • 等于 991 像素的样式

问题在于如何定义一个媒体断点，只让当前媒体查询样式和公共样式生效。以下解决方案可以解决此问题：

解决方案：

在媒体查询中，添加一个精确的值作为 последней 规则。

例如：

@media (width: 991px){
  /* 仅作用于 991px 宽的屏幕 */
}