jquery - 只有第一个媒体查询有效

Question

我在一个基于网格的网站上工作，而你想创建一个移动版本。但是，在编码时，只有第一个媒体查询有效。无论我在第二个 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 ";
}

Answer 1

代替@media (max-width: 400px)，编写@media screen and (max-width: 400px)顺便说一下，你忘了在最后的 .container 之后关闭媒体查询。