多个媒体查询不起作用

Question

嘿伙计们，我不太了解多个媒体查询。这就是我的意思

html代码：

<div class="container">
    <div class="jumbotron">
        <h1 id ="jumbo_text">{% block jumbo_text1 %} {% endblock %}</h1>
        <h2 id ="jumbo_text2">{% block jumbo_text2 %} {% endblock %}</h2>
    </div>
</div>

CSS代码：

@media only screen and (min-width: 200px) and  (max-width: 767px) {
    .jumbotron {

        display: none;
    }
}   

@media only screen and (max-width: 768px){
    .jumbotron {

        height: 200px !important;
        width:300px;
        background-image: url("../../img/jumbo_pics/bbj_class.jpg");
    }

}

基本上第二个媒体查询有效，但第一个媒体查询无效。为什么？

在伪代码中：

devices that are at minium 200px and maximum 360px dont show jumbotron

devices above 360px but below 768px show jumbotron with height of 200px and width of 300px

max-width我也min-width很困惑

是否max-width意味着设备的宽度为最大n，因此所有低于n该样式的尺寸都适用？

是否min-width意味着设备的宽度至少为n且该样式以上的所有尺寸均n适用？

我说得对吗？

总结一下：

1. 如何进行不同范围的多个媒体查询？
2. 我的理解min-width正确吗max-width？

Answer 1

第二个媒体查询稍后出现在样式表中，因此它优先。因为，您在两种情况下都提到了 max-width:767px 和 max-width:768px，它们在 200-768px 范围内重叠，因此稍后出现的第二个已经生效。

高于 360 像素但低于 768 像素的设备

您只提到了最大宽度，对吗？最小宽度在这里没有生效。媒体“屏幕”是对查看页面的设备的限制，在这种情况下，这些设备恰好是除“打印”之外的设备。

这里和这里有关于媒体查询的很好的讨论。

此外，媒体查询与其他 CSS 规则具有相同的特殊性。因此，不要期望媒体查询优先于具有相同选择器的 CSS 规则，除非它稍后出现。

因此，解决问题的一个好方法是以这种方式编写。

.jumbotron{
/*for other device sizes
write styles here */
}

@media only screen and (min-width: 200px) and  (max-width: 360px) {
    .jumbotron {
            display: none;
    }
}   

@media only screen and (min-width:361px) and (max-width: 768px){
    .jumbotron {
        height: 200px !important;
        width:300px;
        background-image: url("../../img/jumbo_pics/bbj_class.jpg");
    }

}

您对最小宽度和最大宽度的理解是正确的，但是在媒体查询中使用它们总是一个好主意，以确保范围不会重叠，并且您最终会得到一个不希望的规则。