我可以有多个媒体查询在网格自动行行大小?

Question

我正在建立一个网格网站，我希望能够在几个断点(浏览器大小)定义行高度，但到目前为止，我只能定义两个。

默认值:

.container {
margin: 0 0;
max-width: 100%;
padding: 0 7%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr) ) ;
grid-auto-rows: 500px;
row-gap: 50px;
}

和以下是媒体查询:

@media(max-width: 500px) {
.container {
grid-auto-rows: 300px;
}
}
@media(max-width: 720px) {
/*.container {
grid-auto-rows: 400px;
}*/
}

如果我取消注释第二个媒体查询，高度将在所有最大宽度为720px的浏览器上为400px，包括那些宽度低于500px的浏览器。

Answer 1

在进行媒体查询时，您需要:

1. 让它们移动优先-你的基本规则包含移动(窄)样式，然后添加媒体查询(min-width)在宽度顺序。
2. 让它们桌面优先-你的基本规则包含桌面(宽)样式，然后添加媒体查询(max-width)在宽度顺序。

你似乎采取了方法二，但你需要重新安排你的媒体查询，使他们在减少宽度的阶。您的720规则需要在之前你的500规则