Question

我正在开发一个基于网格的网站，而U想要创建一个移动版本。但是，在编码时，只有第一个媒体查询才有效。我在第二个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之后的媒体查询。

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

1 个答案: