使用媒体查询重新定位 <video> 元素

Question

我在 stevedillon.net 获得此页面，该元素在 1280x1024 视口上居中，但在其他尺寸下则偏离中心。在 1280x1024，CSS #video 已使用 margin-left: 13%;.

将元素推到中心

我想使用媒体查询对其进行修复，使其在不同的视口大小中居中。我试过以下，但没有运气。有什么想法吗？谢谢

@media (max-width: 1000px){
    #video{
        width: 1200px;
        margin-left: 33%;
    }
}

Answer 1

我使用以下媒体查询解决了这个问题。添加视口范围有助于控制视频容器的大小，就像在 1680px.

上方添加 width 属性一样

@media screen and (max-width: 1670px) and (min-width: 1280px) and 
(orientation: landscape) #video {
    margin-left: 20%;
}

@media screen and (max-width: 1900px) and (min-width: 1680px) and 
(orientation: landscape) #video {
  margin-left: 13%;
  width: 1200px !important;
}

使用媒体查询重新定位 <video> 元素

Repositioning a <video> element with media queries

media-queries