Html 多媒体查询不起作用

嘿，伙计们，我不太会接受多重媒体查询。这就是我的意思

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>

@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

基本上，第二个媒体查询可以工作，但第一个不能。为什么?

在伪代码中：

<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>

@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

是否指宽度为max

n

的设备，因此样式适用于

n

以下的所有尺寸

min width

是否指最小宽度为

n

的设备，以及上述

n

样式适用的所有尺寸

我说得对吗

总结一下：

<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>

@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:767px和max width:768px，它们在200-768px范围内重叠，因此后面出现的第二个已经生效

高于360px但低于768px的设备

你只提到了最大宽度，对吗？“最小宽度”在此未生效。媒体“屏幕”是对查看页面的设备的一种限制，在这种情况下，页面恰好是“打印”以外的设备

关于媒体查询和评论，有一个很好的讨论

此外，媒体查询与其他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");
    }

}

---

你对最小宽度和最大宽度的理解是正确的，但是，在媒体查询中同时使用这两种方法始终是一个好主意，以确保范围不会重叠，并最终得到一条不可取的规则。

您能给我看一段代码片段，以直观地显示正确的方法吗？好的，那么就我在帖子中的伪代码而言，在css中编写它会是什么样子？