在處理移動端頁面時,我們有時會需要將banner圖做成與螢幕等寬的正方形以獲得最佳的體驗效果,如Flipbord的移動頁面:

這裡寫圖片描述

方案一:CSS3 中新增了一組相對於可視區域百分比的長度單位 vw, vh, vmin, vmax。其中 vw 是相對於視口寬度百分比的單位,1vw = 1% viewport width, vh 是相對於視口高度百分比的單位,1vh = 1% viewport height;vmin 是相對當前視口寬高中較小 的一個的百分比單位,同理 vmax 是相對當前視口寬高中 較大 的一個的百分比單位。

利用 vw 單位,我們可以很方便做出自適應的正方形:

.placehodler{
    width:50%;
    height: 50vw;
    background-color: pink;
}

<div class="placehodler"></div>

優點:簡潔方便

缺點:瀏覽器相容不好

方案二:設定垂直方向的padding撐開容器

在 CSS 盒模型中,一個比較容易被忽略的就是 margin, padding 的百分比數值計算。按照規定,margin, padding 的百分比數值是相對父元素的寬度計算的(面試官說這是他想考察的點)。由此可以發現只需將元素垂直方向的一個 padding 值設定為與 width 相同的百分比就可以製作出自適應正方形了:

.placeholder {
  width: 50%;
  padding-bottom: 50%;
}

這時一切看起來都很正常,我們試著給容器內增加內容:

這裡寫圖片描述

咦?高度怎麼溢位了?我們來看這時的盒模型:

這裡寫圖片描述

如圖中所示,內容區域佔據了 38px 的高度。為了解決這個問題,我們可以設定容器的高度為 0:

.placeholder {
  width: 50%;
  height:0;
  padding-bottom: 50%;
}

這種方案簡潔明瞭,且相容性好。