- 原文作者：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();
複製程式碼總結
告別使用內在比率技術破壞佈局的嵌入式內容。我們已經介紹瞭如何使用少量程式碼輕鬆地使 iframe 和其他嵌入式內容響應友好相處。
有你才完美
自認很菜，建立了一個資料結構和演算法的交流群，不限開發語言，前端後端，歡迎各位同學入駐。