Question

我已经完成了响应式移动首页主页，我已经为笔记本电脑编写了媒体查询（最小宽度：768px），现在我正在为桌面设备尝试相同的操作（分钟） -width：1080px）但它无法处理笔记本电脑的查询，因为由于某种原因，最小宽度1080px也会受到高度的影响，事实上当我使用1366x768窗口时，只能看到1080p＆＃39; s查询，但如果我使用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）。这包括您的最小宽度查询中的所有内容：1080px。

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

另外，我认为第一个查询中的逗号正在绊倒你。以下是媒体查询如何相互覆盖的示例。请注意我不需要在上一个查询中调用.media_query_1，因为它仍然有min-width: 769px。

尝试在新窗口中查看此内容并查看查询之间的反应。

＆＃13;

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

＆＃13;

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

1 个答案: