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

Question

我的最后一个媒体查询“@media（最大宽度：400px）”与第二个媒体查询“@media（最小宽度：401px）和（最大宽度：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;
        ;
        }

    }

我会很感激任何人的想法:)

Answer 1

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