@media (max-width: 780px) {.video-grid: { grid-template-column: 1fr 1fr }} 当浏览器达到尺寸时不进行更改

Question

我正在从 https://www.youtube.com/watch?v=G3e-cpL7ofc&pp=ygUIaHRtbCBjc3M%3D 重新创建 Youtube 主页 并即将完成该项目。当浏览器宽度达到 780 像素及以下时，我试图将视频连续放置在两个而不是三个视频中。 当浏览器是781px及以上时，我可以将视频放在4中就可以了。这是我的代码：

@media (min-width: 781px), (max-width: 999px) {
  .video-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 1000px) {
  .video-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }`
}
`

它工作得很好，但不知何故我下面的代码不起作用： ``

@media（最大宽度：780px）{ .视频网格{

grid-template-columns: 1fr 1fr;

}` }

我查了一下，只是在 head 元素中添加了视口元数据，但它似乎没有解决问题，而且它在移动视图上也没有响应

Answer 1

在媒体采石场中，有必要添加最小宽度和最大宽度。只需添加最小宽度或最大宽度即可。

检查此代码是否有效：

@media (min-width: 781px) {
    .video-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 1000px) {
    .video-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

}

@media (max-width: 780px) {
    .video-grid {

        grid-template-columns: 1fr 1fr;

    }
}