提问人：Rachel Huynh 提问时间：11/11/2023 更新时间：11/11/2023 访问量：18
@media （max-width： 780px） {.video-grid： { grid-template-column： 1fr 1fr }} 在浏览器达到大小时不进行更改
@media (max-width: 780px) {.video-grid: { grid-template-column: 1fr 1fr }} not taking changes when browser reaches the size
问：
我正在从 https://www.youtube.com/watch?v=G3e-cpL7ofc&pp=ygUIaHRtbCBjc3M%3D 重新创建Youtube主页，并几乎完成了这个项目。我正在尝试在浏览器宽度达到 780px 及以下时将视频连续放置在两个而不是三个视频中。 当浏览器为 4px 及以上时，我可以将视频放置在 781 中就好了。这是我的代码：
@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 元素中添加了视口元，但它似乎并没有解决问题，而且它在移动视图上也没有响应，用户图片被切成两半，如下所示。
答：
0赞
Jasith Heshala
11/11/2023
#1
在媒体采石场中，有必要添加 min-width 和 max-width。只需添加 min-width 或 max-width。
检查此代码是否有效：
@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;
}
}
评论
0赞
Rachel Huynh
11/12/2023
泰斯姆！它有效。Idk 为什么我在为 1fr 1fr 1fr 查询添加 min-width 和 max-width 时遇到问题，而原始创建者没有任何问题。
上一个：当存在嵌套表时删除边框间距
评论