javascript - 这个背景要怎么调整才不会弄乱手机版？

Question

我创建了一个应该看起来像这样的视频背景:

Video BG

但是我现在的情况是这样的:

Current Video BG

完整代码如下:

<section class="header6 cid-qshCJQFC7b" data-bg-video="" id="header6-1u" data-rv-view="390" style="overflow: hidden;">
                    <div class="mbr-overlay">
                        <video class="header6 cid-qshCJQFC7b" autoplay muted loop id="myVideo">
                            <source src="vid/bridgebg.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="container" style="background: rgba(97, 134, 165,0.7); width: 100%;">
                        <div class="media-container-column mbr-white col-md-10 offset-md-1">
                            <h2 class="mbr-section-title align-center text-white">OUR CORPORATE DONORS</h2>
                            <p class="mbr-text align-center pb-3 mbr-fonts-style" style="font-size: 14px;    letter-spacing: 0.7px; font-weight: lighter;"><!--display-5-->These Buy-it-Forward Companies <br class="hide-in-web"> Deserve your Support&nbsp;
                                <br>
                            </p>
                            <div class="mbr-section-btn align-center">
                                <div class="row">
                                    <div class="col-md-6 logo-civicom text-right">
                                        <a class="display-4" style="margin-right: 20px;" target="_blank" href="" alt="" style="margin-top: 25px;"></a>
                                    </div>
                                    <div class="col-md-6 logo-teamspan text-left">
                                        <a class="display-4" target="_blank" href="" alt="" style="margin-top: 25px;"></a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </section>

现在如果我使用这段代码:

<video style="margin-top: -200px;" class="header6 cid-qshCJQFC7b" autoplay muted loop id="myVideo">
                            <source src="vid/bridgebg.mp4" type="video/mp4">
                        </video>

如您所见，我使用 margin-top 手动调整背景，我会得到我想要的，但它会弄乱移动版本，看起来像这样:

Messed up mobile version

无论如何我可以调整这个背景而不会弄乱移动版本吗？比如自动语法之类的？

Answer 1

我无法重现问题，因为我看不到视频。但这是一次尝试。首先，我不推荐 Inline 样式。这不是编写样式表的最可持续的方式。我建议在您的外部 CSS 中添加样式。另外，我建议使用百分比而不是像素值。根据我的说法，解决此问题的最佳方法是使用 media Query .媒体查询用于在不同屏幕尺寸的浏览器中排列和操作元素，因此您可以执行类似的操作。

@media only screen and (max-width: 600px) {
  .header6{
    margin-top: -20%;
  }
}    
@media only screen and (max-width: 600px) {
     .header6 {
       margin-top: -20%;
     }
 }
@media (min-width: 601px) and (max-width: 1200px) {
    .header6{
        margin-top: -10%
    }
}

不断调整边距，直到找到最佳位置。希望这可以帮助!如果您有更多问题，请告诉我。