[譯]響應式 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 和其他嵌入式內容響應友好相處。

有你才完美

自認很菜，創建了一個數據結構和演算法的交流羣，不限開發語言，前端後端，歡迎各位同學入駐。