如何解决此媒体查询冲突?

Question

这里使用这两个媒体查询，正如我所读到的，如果屏幕大小等于或小于 340px，第一个MediaQuery会影响背景颜色，而第二个 MediaQuery会影响屏幕大小小于或等于 360px...

@media only screen and (max-width: 340px) {
#arf_recaptcha_hruwj8 iframe {
background-color: blue;
}
}
@media only screen and (max-width: 360px) {
#arf_recaptcha_hruwj8 iframe {
background-color: red;
}
}

我想的是，如果大小低于 340px，第一个查询将受到影响，因为我们现在低于 340px。 不是 360px。但它不是变成蓝色，而是只保持红色。
1.你能解释一下我这个困惑吗？

2.如何编写媒体查询，以便在341px 和 360px 之间时应该是红色的，当<=340px 时，我必须是蓝色的。

Answer 1

只需滑动您的媒体查询并检查它是否有效。

@media only screen and (max-width: 360px) {
iframe {
background-color: red;
}
}
@media only screen and (max-width: 340px) {
iframe {
background-color: blue;
}
}

Answer 2

这是关于优先级(CSS Specificity(。如果您使用相同的选择器进行应用，则最后一个始终适用。因为它从上到下读取代码/文件。

#idid{
height: 50px;
width: 50px;
background-color: red;
}

@media only screen and (max-width: 360px) {
#idid {
background-color: black;
}
}
@media only screen and (max-width: 340px) {
#idid {
background-color: blue;
}
}

JSBin link： JSBin LInk

您也可以在此处尝试 css 特异性：CSS 特异性检查器

Answer 3

@media only screen and (max-width: 360px) and (min-width: 340px)
{
body {
background-color:red ;
}
}
@media only screen and (max-width: 339px) {
body {
background-color: blue;
}

这是关于优先媒体查询。如果您使用相同的选择器进行应用，则最后一个始终适用。滑动代码 itz 完美运行