css - 媒体查询高度用作最小宽度中的宽度

Question

我已经完成了一个响应式移动首页，我已经为笔记本电脑编写了一个媒体查询(最小宽度:768 像素)，现在我正在为桌面设备尝试同样的事情(最小宽度:1080 像素)但是它阻止了笔记本电脑的查询，因为出于某种原因，最小宽度 1080px 也受到高度的影响，事实上，当我使用 1366x768 窗口时，只有 1080p 的查询，但是如果我使用 1079x768px 的窗口，则可以使用 768p 的查询.我还注意到，如果我将台式机的查询放在笔记本电脑的查询之前，它就不再起作用了。这是代码:

@media screen and (min-width: 768px), screen and (max-width: 1079px) {
    div#divRegistrazione {
        margin-top: 3vh;
    }
    input[type=text],
    input[type=password] {
        padding: 0.7em 1.5vw;
    }
    input[type=date] {
        font-size: 2em;
        padding: 0.2em 1.5vw;
    }
}

@media screen and (min-width: 1080px) {
    input[type=text],
    input[type=password] {
        padding: 0.9em 1.5vw;
    }
    input[type=date] {
        font-size: 2em;
        padding: 0.45em 1.5vw;
    }
    div#divRegistrazione {
        margin-top: 6vh;
    }
}

Answer 1

这很难描绘，但我认为您的问题在于如何可视化屏幕尺寸。因为顶级媒体查询，它会影响大于 768px(最小宽度:768px)的一切。这包括您查询 min-width: 1080px 中的所有内容。

如果您的宽度超过 1080，它会在第一个查询中设置，然后被您的第二个查询覆盖。

此外，我认为第一个查询中的逗号让您感到困惑。这是媒体查询如何相互覆盖的示例。请注意我不需要在最后一个查询中调用 .media_query_1，因为它仍然有一个 min-width: 769px。

试着在一个新窗口中查看这个，看看查询如何相互 react 。

<style>
/*THIS ONE AFFECTS SCREENS SMALLER THAN 769PX */
@media screen and (max-width: 768px) {
    #divRegistrazione {margin-top: 3vh;}
    input[type=text], input[type=password] {padding: 0.7em 1.5vw;}
    input[type=date] {font-size: 1em; padding: 0.2em 1.5vw;}

    .media_query_1 {display:block;}
    .media_query_2 {display:none;}
    .media_query_3 {display:none;}
}
/*THIS ONE AFFECTS ALL SCREENS LARGER THAN 768PX */
@media screen and (min-width: 769px) {
    #divRegistrazione {margin-top: 6vh;}
    input[type=text], input[type=password] {padding: 0.9em 1.5vw;}
    input[type=date] {font-size: 2em; padding: 0.45em 1.5vw;}

    .media_query_1 {display:none;}
    .media_query_2 {display:block;}
    .media_query_3 {display:none;}
}
/*THIS ONE AFFECTS ALL SCREENS LARGER THAN 1080PX, INCLUDING THE ABOVE MEDIA QUERY */
@media screen and (min-width: 1080px) {
    /*these override the classes in the above query */
    .media_query_2 {display:none;}
    .media_query_3 {display:block;}
    
}
</style>
<div id="divRegistrazione">
    <div class="media_query_1">SMALL SCREEN SIZE</div>
    <div class="media_query_2">MEDIUM SCREEN SIZE</div>
    <div class="media_query_3">LARGE SCREEN SIZE</div>
        <input type="text" name=""><br />
        <input type="password" name=""><br />
        <input type="date" name="">
</div>