媒体查询高度用作 min-width 中的宽度

Question

我已经做了一个响应式移动首页，我已经为笔记本电脑编写了一个媒体查询（最小宽度：768px），现在我正在为桌面设备尝试同样的事情（最小宽度：1080px）但是它阻止了笔记本电脑的查询，因为由于某种原因，最小宽度 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。

尝试在新窗口中查看此内容，看看查询如何相互反应。

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