如何在手机或平板电脑上使用自举图片或视频来调整屏幕尺寸

Question

我有一个在bootstrap中创建的网站，所以当我使用手机或平板电脑时，导航栏和所有其他内容都会调整到屏幕大小，但我添加了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;
}

这就是我在桌面上的样子

这就是它在平板电脑尺寸上的外观，您可以想象它在移动设备上的外观

如果你想看看http://www.praga-light.de，youtube视频看起来很棒我只想要它们，但是当你调整浏览器大小时他们只是走出屏幕的3个盒子。

Answer 1

移动设备上需要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%;
}

Answer 2

我创建了纯引导网格系统。请尝试此代码

＆＃13;

＆＃13;

.portfolio-item {
margin-bottom:10px;
}

＆＃13;

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!------Strat html code-------->
<div class="col-xs-4 portfolio-item">
    <div class="embed-responsive embed-responsive-16by9">
        <a href="#">
            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
        </a>
    </div>
</div>
<div class="col-xs-4 portfolio-item">

    <a href="#">
        <img src="http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg" class="img-responsive">
    </a>

</div>
<div class="col-xs-4 portfolio-item">
    <div class="embed-responsive embed-responsive-16by9">
        <a href="#">
            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
        </a>
    </div>
</div>
<!------End html code-------->

＆＃13;

＆＃13;

＆＃13;

Answer 3

关于图像块，你不需要div，这里有更好的HTML

<div class="img1">
    <a href="/"><img src="n.png"></a>
    <a href="/"><img src="n.png"></a>
    <a href="/"><img src="n.png"></a>
</div>

<style>
.img1 {
    width: 100%;
}

.img1 a {
    display: inline-block;
    float: left;
}
<style>