我在一个基于网格的网站上工作,而你想创建一个移动版本。但是,在编码时,只有第一个媒体查询有效。无论我在第二个 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 ";
}
最佳答案
代替@media (max-width: 400px)
,编写@media screen and (max-width: 400px)
顺便说一下,你忘了在最后的 .container 之后关闭媒体查询。
关于jquery - 只有第一个媒体查询有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49707929/