媒体查询和我的网格显示无法按我想要的方式工作

Question

这是我的问题：我放置了一个“主”元素并给了他“网格”显示。然后，我写了两种网格如何根据屏幕尺寸变化的方法，这是我写的：

main{
    display : grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: minmax(400px , auto);
    align-items: stretch;
    margin: 10px;
}
@media screen and (min-width:700px){
    main{
        grid-template-columns: repeat(2 ,1fr);
    }
}

因此，如果尺寸超过 700 像素，我有 2 列，如果尺寸小于 700 像素，我有 1 列。 问题是它不起作用，如下图所示： 。 有趣的是，它仅在像素数为 400 时有效，但我也希望它在 700 像素时有效。

我尝试做同样的事情，但不是使用“最小宽度”，而是使用“最大宽度”，但这是同样的问题，并且显示完全相同的站点。 有谁知道问题出在哪里吗？

Answer 1

如果大小超过 700 像素，则需要 2 列，如果小于 700 像素，则需要 1 列。因此，您应该尝试在媒体查询中尝试最大宽度 700px 的 1 列和全局的 2 列，如下所示：

试试这个方法，希望能解决你的问题

main{
 display : grid;
 grid-template-columns: repeat(2, 1fr);
 grid-auto-rows: minmax(400px , auto);
 align-items: stretch;
 margin: 10px;
}
 @media screen and (max-width:700px){
   main{
    grid-template-columns: repeat(1 ,1fr);
   }
 }