[譯]響應式 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算法之遞歸