Question

这里使用的是这两种媒体查询，据我了解，如果屏幕尺寸等于或小于340px，则第一个MediaQuery 会影响背景颜色，而第二个MediaQuery strong>如果屏幕尺寸小于或等于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;
        }
    }

我想是，如果尺寸小于340像素，第一个查询将会生效，因为我们现在小于340像素。不是360像素。而是变成红色，而不是变成蓝色。
1.您能给我解释一下这种困惑吗？

2。如何编写媒体查询，以使其在 341px和360px之间时应为 red ，并且在 <= 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特殊性）。如果您使用相同的选择器，则最后一个总是适用。因为它从上到下读取代码/文件。

#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链接：JSBin LInk

您还可以在此处尝试CSS特异性：CSS Specificity checker

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效果很好

如何解决媒体查询冲突？

3 个答案: