在處理移動端頁面時,我們有時會需要將 banner 圖做成與螢幕等寬的正方形以獲得最佳的體驗效果,如 Flipbord 的移動頁面:
那麼應該怎麼使用純 CSS 製作出能夠自適應大小的正方形呢?
方案一:CSS3 vw 單位
CSS3 中新增了一組相對於可視地區百分比的長度單位 vw, vh, vmin, vmax
。其中 vw 是相對於視口寬度百分比的單位,1vw = 1% viewport width
, vh
是相對於視口高度百分比的單位,1vh = 1% viewport height
;vmin
是相對當前視口寬高中 較小 的一個的百分比單位,同理 vmax 是相對當前視口寬高中 較大 的一個的百分比單位。該單位瀏覽器安全色性如下:
利用 vw 單位,我們可以很方便做出自適應的正方形:
<p class="placeholder"></p> .placeholder { width: 100%; height: 100vw;}
實現效果
優點:簡潔方便
缺點:瀏覽器安全色不好
方案二:設定垂直方向的 padding 撐開容器
在 CSS 盒模型中,一個比較容易被忽略的就是 margin, padding
的百分比數值計算。按照規定,margin, padding
的百分比數值是相對 父元素寬度 的寬度計算的。由此可以發現只需將元素垂直方向的一個 padding
值設定為與 width
相同的百分比就可以製作出自適應正方形了:
.placeholder { width: 100%; padding-bottom: 100%;}
實現效果
這時一切看起來都很正常,我們試著給容器內增加內容:
咦?高度怎麼溢出了?我們來看這時的盒模型:
中所示,內容地區佔據了 38px 的高度。為瞭解決這個問題,我們可以設定容器的高度為 0:
.placeholder { height: 0;}
這種方案簡潔明了,且相容性好;但是除了填充內容後會出現問題以外,還有可能碰上 max-height
不收縮:DEMO,於是第三種方案來了:
方案三:利用虛擬元素的 margin(padding)-top 撐開容器
在方案二中,我們利用百分比數值的 padding-bottom
屬性撐開容器內部空間,但是這樣做會導致在元素上設定的 max-height
屬性失效:
而失效的原因是 max-height 屬性只限制於 height,也就是只會對元素的 content height
起作用。那麼我們是不是能用一個子項目撐開 content
部分的高度,從而使 max-height
屬性生效呢?我們來試試:
.placeholder { width: 100%;}.placeholder:after { content: ''; display: block; margin-top: 100%; /* margin 百分比相對父元素寬度計算 */}
一重新整理頁面,啊嘞?怎麼什麼也沒有?
這裡就涉及到 margin collapse 的概念了,由於容器與虛擬元素在垂直方向發生了外邊距摺疊,所以我們想象中的撐開父元素高度並沒有出現。而應對的方法是在父元素上觸發 BFC
:
.placeholder { overflow: hidden;}
註:若使用垂直方向上的 padding
撐開父元素,則不需要觸發 BFC
實現效果
OK,父元素被撐起來了,我們再試一試設定 max-height:
完美!什嗎?你說元素內部新增內容時高度會溢出?來人,把這個叛徒拖出去喂狗!對於這樣的情況,可以將內容放到獨立的內容塊中,利用絕對位置消除空間佔用。
結語