我有一个在引导程序中创建的网站,所以当我在手机或平板电脑上导航栏时,所有其他内容都会调整到屏幕尺寸,但是我添加了3个框和2个youtube视频,我希望它们在调整到屏幕尺寸时我使用手机或平板电脑。在我的桌面上看起来还不错,但是当我在手机上看时,视频和盒子就不在屏幕上了。
有人可以帮我尽快完成这项工作,完成这项工作非常重要。有人可以一步一步地指导我吗?
以下是一些屏幕截图:

HTML对于仅是图像的3个框

<div class="img1">
<a href="link"><img src="img"></a>
</div>

<div class="img2">
<a href="link"><img src="img"></a>
</div>

<div class="img3">
<a href="link"><img src="img"></a>
</div>


CSS:

.img1 {
 position: relative;
 left: 290px;
 bottom: -20px;
}

.img3 {
 position: relative;
 left: 578px;
 bottom: 101px;
}

.img2 {
 position: relative;
 left: 865px;
 bottom: 222px;
}


多数民众赞成在我的桌面上看起来

html - 在手机或平板电脑上时,如何使用 bootstrap 来图片或视频调整屏幕大小-LMLPHP

这就是平板电脑尺寸的样子,您可能可以想象它在手机上的外观

html - 在手机或平板电脑上时,如何使用 bootstrap 来图片或视频调整屏幕大小-LMLPHP

如果您想自己看看http://www.praga-light.de,那么youtube视频就很好,就像我想要的那样,但是当您调整浏览器大小的3个框时,它们就不在屏幕上了。

最佳答案

您需要在移动设备上更改YouTube视频的宽度大小吗?

您将div包装添加到视频代码中,

    <div class="ResponsiveVideoWrapper">
<iframe width="854" height="480" src="https://www.youtube.com/embed/CqVqlcBQGYw" frameborder="0" allowfullscreen=""></iframe>
</div>


CSS:

.ResponsiveVideoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.ResponsiveVideoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

关于html - 在手机或平板电脑上时,如何使用 bootstrap 来图片或视频调整屏幕大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41322939/

10-12 12:36
查看更多