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

nlejzf6q  于 2023-11-19  发布在  其他
关注(0)|答案(1)|浏览(96)

我正在从https://www.youtube.com/watch?v=G3e-cpL7ofc&pp=ygUIaHRtbCBjc3M%3D重新创建Youtube主页,并几乎完成了该项目。我试图使视频放置在两个,而不是三个视频在一排时,浏览器宽度达到780 px及以下。我可以使视频放置在4时,浏览器是781 px及以上刚刚好。下面是我的代码:

@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(max-width:780px){ .video-grid {

grid-template-columns: 1fr 1fr;


{\fnSimHei\bord1\shad1\pos(200,288)}
我查了一下,只是在head元素中添加了viewport Meta,但似乎没有解决问题,而且在移动的视图The user-picture is cut in half as shown below.上也没有响应

5us2dqdw

5us2dqdw1#

在介质采集中,需要添加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;

    }
}

字符串

相关问题