CSS 网格和媒体查询的问题（帮助！）[已解决]答案

【问题标题】：Issues with CSS Grid and Media Queries (HELP!) [SOLVED]CSS 网格和媒体查询的问题（帮助！）[已解决]
【发布时间】：2020-08-11 10:55:23
【问题描述】：

我的最后一个媒体查询“@media (max-width: 400px)”与第二个媒体查询“@media (min-width: 401px) and (max-width: 1024px)”没有任何变化。我想将 #outer 的列数从 4 更改为 2，并将 #section 的列数从 2 更改为 1。如何在不影响其他媒体查询的情况下使其工作？

    @media (min-width: 1025px) {
        main {
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas: 
            "header header header header"
            "article article article aside"
            "section section section aside"
            "footer footer footer footer"
            ;
        }

        aside #outer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
        "item1 item2"
        "item3 item4"
        "item5 item6"
        ; 
        grid-gap: 15px 0px;
    }

    section #section {
        padding: 15px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        "section1 section2"
        "section3 section4"
        ;
        grid-gap: 15px 15px;
    }
    }

    @media (min-width: 401px) and (max-width: 1024px) {
        aside #outer {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-areas: 
            "item1 item2 item3 item4"
            "item5 item6"
            ;
            grid-gap: 15px 15px;
            margin: 15px;
        ;
        }

        main {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: auto;
            grid-template-areas: 
            "header"
            "article"
            "section"
            "aside"
            "footer"
            ;
            grid-gap: 10px;
        }

        section #section {
        padding: 15px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        "section1 section2"
        "section3 section4"
        ;
        grid-gap: 15px 15px;
    }

    }

    @media (max-width: 400px) {
        main {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-areas: 
            "header"
            "article"
            "section"
            "aside"
            "footer"
            ;
            grid-gap: 10px;
        }

        section #section {
        padding: 15px;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
        "section1"
        "section2"
        "section3"
        "section4"
        ;
        grid-gap: 15px 15px;
        }

        aside #outer {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: 
            "item1 item2"
            "item3 item4"
            "item5 item6"
            ;
            grid-gap: 15px 15px;
            margin: 15px;
        ;
        }

    }

我会感谢任何人的想法:)

【问题讨论】：

可能是媒体查询中最后一个margin: 15px 之后的额外;。此外，最好不要使用max-width 媒体查询。去掉所有样式，将它们放在 CSS 文档的顶部，并使用媒体查询来覆盖这些值。事实上，我会重新排序您的媒体查询 - 将 400px 和向下移出查询并移到顶部，然后是 401-1024，然后是 1025 及以上。
去掉多余的；仍然不起作用..另外，我必须专门为我的作业使用 max-width 。正如你所说，我改变了我的媒体查询的顺序。

标签： html css

【解决方案1】：

媒体查询没有问题。只是窗户的尺寸不够小。当我更改为移动视图时，它确实有效。

【讨论】：