在處理移動端頁面時，我們有時會需要將banner圖做成與螢幕等寬的正方形以獲得最佳的體驗效果，如flipbord的移動頁面：
方案一：css3 中新增了一組相對於可視區域百分比的長度單位 vw, vh, vmin, vmax。其中 vw 是相對於視口寬度百分比的單位，1vw = 1% viewport width， vh 是相對於視口高度百分比的單位，1vh = 1% viewport height；vmin 是相對當前視口寬高中較小 的乙個的百分比單位，同理 vmax 是相對當前視口寬高中 較大 的乙個的百分比單位。
利用 vw 單位，我們可以很方便做出自適應的正方形：
width:50%;
height: 50vw;
background-color: pink;
}class="placehodler">div>
優點：簡潔方便
缺點：瀏覽器相容不好
方案二：設定垂直方向的padding撐開容器
在 css 盒模型中，乙個比較容易被忽略的就是 margin, padding 的百分比數值計算。按照規定，margin, padding 的百分比數值是相對父元素的寬度計算的（面試官說這是他想考察的點）。由此可以發現只需將元素垂直方向的乙個 padding 值設定為與 width 相同的百分比就可以製作出自適應正方形了：
.placeholder
咦？高度怎麼溢位了？我們來看這時的盒模型：
如圖中所示，內容區域佔據了 38px 的高度。為了解決這個問題，我們可以設定容器的高度為 0：
.placeholder
CSS實現自適應正方形
在處理移動端頁面時，我們有時需要將banner圖做成與螢幕等寬的正方形以獲得最佳效果。方案一 css3 vw單位 css3中新增了一組相對於可視區域百分比的長度單位 vw,vh,vmin,vmax。vw是相對於視口寬度的百分比，1vw 1 viewport width vh是相對於視口高度的百分比，...
用css實現自適應正方形
用css實現自適應正方形 不多說，直接上 本文章一共例舉了3種方案 doctype html html lang en head meta charset utf 8 title css實現自適應正方形 title style 使用padding bottom實現正方形 square1 square...
Css實現自適應螢幕寬度的正方形
思路，正方形，長寬都一樣，需要找到乙個標準值然後再去設定盒子模型，可以用padding，margin,width height,正題開始 1.使用padding，原因，百分比是基於父元素的寬度，所以如果是根據父盒子的百分比來算，則可以使用這個方法 具體 如下 class square div squ...