在某些特定的場景中，如視頻播放、可視化圖表占位等一些高寬需要固定的比例。如果占位區(qū)間是由固定值確定，那么我們皆大歡喜，但在目前的的應用發(fā)展中寬高自適應的方式才能滿足我們的需求，那么我們該如何這種自適應的 寬高比布局 呢？

什么是寬高比？

寬高比也稱縱橫比，元素的縱橫比描述了其寬度和高度之間的比例關系。兩種常見的視頻寬高比為4：3和16：9。要保持div的寬高比，通過為 padding-top / padding-bottom 添加一個百分比值。不同的寬高比具有不同的百分比值?；虿捎靡暣皢挝?vw / vh 設置相應高寬。其中一些如下所示：

利用padding-top/bottom適配

在CSS中 margin 與 padding 的百分比值是根據(jù)容器的width來計算，利用這一性質我們可以通過設置 padding-top/bottom 的百分比值實現(xiàn)。 采用這種方法，需要把容器的height設置為0，最終容器實際高度由padding撐出。在此基礎上又可分為 偽元素 與 內容絕對定位 兩種方案。這也是目前最佳的處理方式。具體實現(xiàn)如下：

Note: 示例均采用2:1的關系

1、偽元素

適用場景：IE8+ 、現(xiàn)代瀏覽器

優(yōu)點: DOM節(jié)點少、可響應式、需精確到像素

<div class="aspect-ration"></div>

.aspect-ration { background-color: #f00; }
.aspect-ration::before {
content: "";
float: left;
padding-bottom: 50%;
}
.aspect-ration::after {
clear: both;
content: "";
display: table;
}

2、內容絕對定位

適用場景：IE8+ 、現(xiàn)代瀏覽器 優(yōu)點: 可響應式、精確到像素

<div class="aspect-ration">
<div class="content"></div>
</div>

.aspect-ratio {
height: 0;
overflow: hidden;
padding-top: 50%;
background: #f00;
position: relative;
}
.content {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
/* 或者 */
/* position: absolute; top: 0; left: 0; width: 100%; height: 100%; */
}

視窗單位 vw/vh

利用視窗單位是一種相對于屏幕大小的計算方式，同理我們也也可用用 rem 來達到相同的效果。具體實現(xiàn)與視窗單位一樣。