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？

我正确的做到了吗？

将其打包：

如何进行不同范围的多个媒体查询？
是我对min-width和max-width的理解吗？

Answer 1

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

设备高于360px但低于768px

你刚才提到最大宽度对吗？最小宽度在这里没有影响。媒体＆＃34;屏幕＆＃34;是对查看页面的设备的限制，在这种情况下恰好是除了＆＃34; print＆＃34;之外的其他设备。

对媒体查询here和here进行了很好的讨论。

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

}

你对min-width和max-width的理解是正确的，但是在媒体查询中使用它们总是一个好主意，以确保范围不重叠，你最终得到一个不可取的规则

多个媒体查询无效

1 个答案: