Jquery 只有第一个媒体查询有效

我正在一个基于网格的网站上工作，你想创建一个移动版本。但是，编码时，只有第一个媒体查询起作用。无论我在第二个jQuery中编写的代码有多可笑，都不会有任何变化。 有人能帮我吗

@media (max-width: 1050px) and (min-width: 401px) {
    .container {

    display: grid;

    margin-left:3.5%;
    margin-right:0%;
    margin-top: 5%;
    grid-template-columns: repeat(9, minmax(75px,1fr));
    grid-template-rows: repeat(4, minmax(50px,1fr));


    grid-template-areas: 
        "a a a a a a b b b "
        "c c c d d d e e e "
        "f f f g g g h h h "
        "i i i j j j k k k ";
}
}   
@media (max-width: 400px) {
    .container {

    display: grid;

    margin-left:3.5%;
    margin-right:0%;
    margin-top: 5%;
    grid-template-columns: repeat(6, 1fr));
    grid-template-rows: repeat(6, 1fr));


    grid-template-areas: 
        "a a a a a a "
        "b b b c c c "
        "d d d e e e "
        "f f f g g g "
        "h h h i i i "
        "j j j k k k ";
}

代替

@介质（最大宽度：400px）

，写入

@介质屏幕和（最大宽度：400px）

---

顺便说一下，您忘了关闭结尾处.container之后的媒体查询。

那么HTML代码呢？为什么要使用jQurey标签？建议：当您开始开发web应用程序时，应该首先应用移动实现。例如，默认情况下，所有css规则都会自定义网站的移动表示。媒体查询将逐步定制更大屏幕的页面设计，从如下方式开始：

@媒体屏幕和（最小宽度：768px）{/*平板电脑规则*/}

，然后是

@媒体屏幕和（最小宽度：992px）{/*桌面规则*/}

，然后是

@媒体屏幕和（最小宽度：1200px）{/*大型桌面的规则*/}

等。