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

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

引言

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

正文

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

.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();

复制代码