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

nlejzf6q 于 2023-11-19 发布在其他

关注(0)|答案(1)|浏览(97)

我正在从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.上也没有响应

css

来源：https://stackoverflow.com/questions/77464127/media-max-width-780px-video-grid-grid-template-column-1fr-1fr-not-t

1条答案

按热度按时间

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;

    }
}

字符串

赞(0）回复(0）举报 2023-11-19

我来回答

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

1条答案

相关问题

热门标签

最新问答