[译]响应式 Iframe - 正确的打开方式

• 原文做者：BEN MARSHALL
• 原文连接： Responsive Iframe — The Right Way (CSS Only)!
• 译者：snow
• 喜欢理由：让你的 iframe 变成响应式

引言

这周公司安排了一个需求，设计一个响应式布局。因为以前一直在作后台管理系统居多，对这响应式布局几乎是个小白。因而 Google 而之，意外的发现了 iframe 的响应式布局，特来分享。翻译水平有限，还请批评指正。

正文

响应式 iframe 是很简单的。使用以下所示的响应式 iframe css(采用内部比率)让你的 iframe 变成响应式的。你将不会再问“怎么让 iframe 变成响应式的”

View Demo View Code

.iframe-container {
  overflow: hidden;
  position: relative;
  padding-top: 56.25%;
}
 
.iframe-container iframe {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   border: 0;
}
复制代码

上面的响应式 iframe css 演示了如何将一个正常流的 iframe 转换为响应式 iframe。只需确保更新了 padding-top 属性以反映长宽比，使 iframe 具备响应能力。

如何使 iframe 响应…简单!

不断的尝试和失败使 iframe 响应就像 web 开发世界中一股清流。问题是 iframe 被设置为 100% 成为流体，让高度成为了一个固定的大小而不会响应。不要头痛，由于试图克服这项不知道的技术“如何使 iframe 成为响应式”，最终只须要简单的css就能解决，即固有比率技术。

JavaScript 不是一个解决方案。

JavaScript 不是让 iframe 响应的解决方案

每当我看到有人使用 JavaScript 使 iframe 响应时，我都会感到惧怕。即便它们很轻，也不须要。更糟的是，他们常常有本身的跨浏览器兼容性问题。有一种更简单、更容易实现和跨浏览器兼容的解决方案可使 iframe 响应更快，称为固有比率技术。让咱们深刻研究响应式 iframe css ，看看它是如何工做的。

响应iframe的固有比率。

你已经花费了无数的时间来设计和构建完美的响应性站点。其中一个问题--iframe。按比例调整(亦称，响应式 iframe ）这通往另外一个世界的讨厌的小窗口可能会使人沮丧。很容易使 iframe 的宽度跨越其容器的100%。并且，让其高度尺寸合适的话是比较麻烦的。

那么你如何防止顶层试图来让 iframe 响应？

在按比例调整视频大小中，咱们学习了如何使用固有比例技术使你嵌入的视频响应。咱们将使用相同的方法，并应用它使任何 iframe， YouTube 和 Vimeo 视频或谷歌地图响应。惟一的依赖是你须要知道 iframe 的纵横比( width x height )。

当为视频等内容嵌入 iframe 时，YouTube 和 Vimeo 等大多数服务都会提供以下代码片断:

<iframe width="560" height="315" src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen>
</iframe>
复制代码

注意，我删除了 frameborder 属性。若是你正在使用 HTML5，则再也不支持该属性。

响应 iframe CSS

首先，移除 width 和 height 属性。不管屏幕大小如何，保留这些属性都会强制内容保持该大小。当屏幕尺寸小于 iframe 的宽度时，这会致使响应式布局出现问题。尽管咱们可使用 css 强制大小，用不到它们为何还要去使用呢--越少的代码越精致

<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
复制代码

接下来，让咱们在 iframe 周围添加一个带有 class 的容器:

<div class="iframe-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
复制代码

如今，咱们添加了一点 css 魔法来让 iframe 响应。就像咱们在 “按固有比例调整视频大小” 中所作的同样。

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
 
/* 4x3 纵横比 */
.iframe-container-4x3 {
  padding-top: 75%;
}

复制代码

重要提示: 不要忘记在 iframe 中应用纵横比类。若是不这样作，它可能会致使 iframe 消失。

搞定，简单吧。你的 iframe 如今应该能够根据浏览器大小而按比例调整大小了。

下面是它的工做原理:

• 关键是要指定容器的 position 为 relative。这使得咱们能够在其中绝对定位 iframe，这是使其响应所必需的。

• padding-top 值是根据内容的长宽比计算的。咱们没有将它添加到内部容器类中，而是添加到了 intrinsic-container 类中，这些类能够根据嵌入内容的类型附加到该元素中。我更喜欢这样作，这样我就不会为不一样的纵横比复制容器代码。要找到容器的长宽比，可使用这个公式: height ÷ width = 纵横比

• height 被设置为 0，由于 padding-bottom 赋予 iframe 它的高度。

• 使用 overflow: hidden 很是重要，由于它能够确保若是有任何内容突出到容器外，它就会被隐藏起来，避免打乱站点布局。

• 与大多数 absolute 定位元素同样，咱们须要设置 top 和 left 属性，以便 iframe 被放到正确的位置。

• 最后，将 width 和 height 设置为 100%，这样 iframe 就占据了 100% 的容器空间。

使用 SASS

若是你使用的是 SASS，使用这个函数能够找到父容器的比例或 padding-bottom:

/** * Ratios * 返回指定尺寸的比例. */
@function ratio($width, $height) {
  return percentage( $height / $width);
}
复制代码

更进一步，你能够建立一个 mixin 来生成比率类:

@mixin generateRatios($width, $height, $prefix: "ratio-") {
  $class-name: $prefix + $width + "x" + $height;
 
  .#{$class-name} {
    padding-bottom: ratio($width, $height);
  }
  // 输出示例: .ratio-16x9 {}
}
 
@include generateRatios(16,9); // 16x9
@include generateRatios(4,3);  // 4x3
复制代码

咱们可使用相同的技术使其余类型的嵌入式内容变成响应式，如谷歌地图和日历。基本上，任何使用 iframe 的只使用 css 就足够了!若是你不能直接编辑站点样式表，这里有一个很好的工具，能够为您生成响应性很强的嵌入代码网站。

使用css框架

如今不少项目都会使用一些 css 框架，好比Bootstrap、Foundation或Materialize来帮助在整个项目中保持统一的样式。一些框架已经有了与上面彻底相同的类。看看下面的一些例子。

Bootstrap 中 iframe 的响应式

在 Bootstrap 3.2+，使用预约义的类 .embed-responsive 和一个像 .embed-response-16by9 这样的长宽比类修饰符(下面会列出更多)。 此宽高比修饰符将根据给定的修饰符类添加具备不一样百分比的填充顶部，而后为 iframe 添加 .embed-response-item 类。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/K1K8s-tQGqY" allowfullscreen>
  </iframe>
</div>
复制代码

Bootstrap 中其余响应 iframe 比率:

• .embed-responsive-21by9
• .embed-responsive-16by9
• .embed-responsive-4by3
• .embed-responsive-1by1

你固然能够建立你本身的修改类:

.embed-responsive-10by3 {
   padding-top: 30%;
}
复制代码

Materialize 中 iframe 的响应式

若是你正在使用 Materialize CSS，那么你也不须要本身的类。只需将 .video-container 类添加到容器中:

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/K1K8s-tQGqY" frameborder="0" allowfullscreen>
  </iframe>
</div>
复制代码

Foundation 中 iframe 的响应式

<div class="responsive-embed">
  <iframe src="https://www.youtube.com/embed/K1K8s-tQGqY" frameborder="0" allowfullscreen>
  </iframe>
</div>
复制代码

长宽比修饰类设置在 $responsive-embed-ratios 中嵌入在 Foundation 设置文件里:

$responsive-embed-ratios: (
  default: 16 by 9,
  vertical: 9 by 16,
  panorama: 256 by 81,
  square: 1 by 1,
);
复制代码

使用 JS 响应 iframe

若是你不知道长宽比怎么办？你用不一样的维度建立交互时，在不知道 iframe 的纵横比的状况下，很难实现固有比率技术。

你能够用 JS 来解决这个问题:

// 找到全部的 iframe
var $iframe = $( "iframe" );
// 保存全部 iframe 的纵横比
$iframe.each(function () {
  $( this ).data( "ratio", this.height / this.width )
    // 移除 width 和 height 属性
    .removeAttr( "width" )
    .removeAttr( "height" );
});
 
// 当窗口被调整大小时，调整 iframe 的大小
$( window ).resize( function () {
  $iframe.each( function() {
    // 获取父元素内容的宽
    var width = $( this ).parent().width();
    $( this ).width( width )
      .height( width * $( this ).data( "ratio" ) );
  });
// 调整大小以适应页面加载上的全部iframe。
}).resize();

复制代码

总结

告别使用内在比率技术破坏布局的嵌入式内容。咱们已经介绍了如何使用少许代码轻松地使 iframe 和其余嵌入式内容响应友好相处。

有你才完美

自认很菜，建立了一个数据结构和算法的交流群，不限开发语言，前端后端，欢迎各位同窗入驻。

传送门

1. JavaScript数据结构之栈
2. JavaScript数据结构之队列
3. JavaScript 数据结构之队栈互搏
4. JavaScript数据结构之链表--介绍
5. JavaScript数据结构之链表--设计
6. JavaScript 算法之复杂度分析
7. JavaScript 算法之最好、最坏时间复杂度分析
8. JavaScript算法之递归