当您有两个大小相同的媒体查询时会发生什么？答案

【问题标题】：What happens when you have two media queries that are at the same size?当您有两个大小相同的媒体查询时会发生什么？
【发布时间】：2021-10-01 22:48:30
【问题描述】：

假设您对一个元素有两个媒体查询都匹配。你怎么知道谁赢了？

例如，假设您有一个媒体查询将矩形设置为小于或等于 500 像素的红色，而您有一个媒体查询将其设置为大于或等于 500 像素的蓝色。哪一个赢了？假设您有一部 500 像素宽的手机。

hr {
  width: 400px;
  left: 10px;
  top: 0;
  position: absolute;
}

.rect {
  left: 10px;
  position: absolute;
  top: 20px;
  right: 10px;
}


@media (max-width: 400px) {
  .rect {
    background-color: lightgray;
  }
}

/* larger content */
@media (min-width: 400px) {
  .rect {
    background-color: lightblue;
  }
}

<div class="rect">
  Here is a div
</div>

<hr width="500px">

我想设置正确的媒体断点。我需要重写它们吗？它们应该是最小宽度 501px 等吗？

【问题讨论】：

这是你最后写在 css 中的内容。请记住，CSS 是从上到下读取的，因此无论最新样式是什么，都会优先考虑。
两者都可以。如果它们中的属性相同，则将应用代码中的属性。
我在使用 max-width 进行媒体查询时总是遇到这个问题，所以现在我总是使用 min-width

标签： html css media-queries

【解决方案1】：

CSS 表示层叠样式表。
级联的定义： “以一系列或连续的阶段排列或发生的事物，因此每个阶段都源自前一个的产物或作用于前一个的产物。”

因此，级联中后面的任何内容都将覆盖前面的内容。

是的，您应该将 min-width 设置为 401。

【讨论】：

好的，所以最后一个具有相同特异性的获胜，最小宽度和最大宽度小于等于，大于等于。
将最小宽度设置为 401 的问题是亚像素渲染（至少在 Firefox 中）意味着样式可能会落入差距。见Example 17 from the media queries level 4 spec

【解决方案2】：

通常，“获胜”（已应用！）代码中最后出现的样式声明。您可以在样式声明上设置 !important ，但恕我直言，这是折腾的，有时不起作用。我“认为”id 样式将比类样式更重要，但我知道您可以设置多个类名样式更有影响力。

代码未测试：

#less_important {
   background : green;
   width : 50px;
   height : 50px;
}


.blue {
    background : blue;
    width : 50px;
    height : 50px;
}


.red {
   background : red;
   border : 1px solid yellow;
}

<html>

<div id = "less_important" class = "blue">

</div>


<div class = "blue red">

</div>

<div class = "red blue">

</div>


</html>

在代码中移动样式 .red 和 .blue 看看会发生什么就明白了

【讨论】：