需要响应式 iframe 布局答案

【问题标题】：Need responsive iframe layout需要响应式 iframe 布局
【发布时间】：2014-04-22 17:32:04
【问题描述】：

我想设计一个包含 4 个iframes 的页面，并为其设计响应式布局。下面是在桌面上工作但在 ipad 上无法正常工作的代码。我想要它的响应式布局。

Demo

【问题讨论】：

小提琴链接jsfiddle.net/nilam/63meQ
我需要为每个 iframe 包含标题。我可以在没有相对定位的情况下这样做吗？

标签： html css responsive-design

【解决方案1】：

对于响应式布局，请使用 CSS 媒体查询

DEMO

HTML

<div class="wrapper">
    <div class="h_iframe">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="h_iframe">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="h_iframe">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="h_iframe">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html, body {
    height:100%;
}
.wrapper {
    padding: 0 1%;
    width:98%;
}
.h_iframe {
    float:left;
    margin:1% 2%;
    width:46%;
}
iframe {
    width:100%;
}
@media screen and (max-width: 768px) {
    .wrapper {
        margin:0 auto;
        padding:0;
        width:95%;
    }
    .h_iframe {
        margin:0;
        width:100%;
    }
}

【讨论】：

这似乎很好的解决方案，但是当我们以 % iframe 高度编辑高度时不会改变。只有当我们以 px 为单位给出高度时，它才会改变。
并且不希望以像素为单位的高度
在响应式布局中不需要添加高度，我从代码中删除高度并更新代码。请检查。
我需要为每个 iframe 包含标题。我可以在没有相对定位的情况下这样做吗？
我在 iframe 中有图表，但这些图表正在被裁剪。我可以对此有更好的解决方案吗

【解决方案2】：

Demo

这是页面上完整的响应式 4 iframe。

HTML

<div class="wrapper">
    <div class="h_iframe1">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div class="wrapper">
    <div class="h_iframe2">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div class="wrapper">
    <div class="h_iframe3">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div class="wrapper">
    <div class="h_iframe4">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

html, body {
    height:100%;
}
.h_iframe1 iframe {
    position:absolute;
    top:0;
    width:100%;
    height:25%;
}
.h_iframe2 iframe {
    position:absolute;
    top: 25%;
    width:100%;
    height:25%;
}
.h_iframe3 iframe {
    position:absolute;
    bottom:25%;
    width:100%;
    height:25%;
}
.h_iframe4 iframe {
    position:absolute;
    bottom:0;
    width:100%;
    height:25%;
}

【讨论】：

【解决方案3】：

基于Youtube iframe http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php的解释解决方案

【讨论】：

我需要为每个 iframe 包含标题。我可以在没有相对定位的情况下这样做吗？