描述
在開發(fā)過程中，會有這么一個情況譬正，需要將一個盒子的尺寸定義為固定比例宫补，且尺寸需根據(jù)視圖的尺寸來進(jìn)行縮放，也就是響應(yīng)式导帝，常見的多如有矩形守谓、圓形等。
下面我將使用下面的例子為大家進(jìn)行講解：
正文
其實(shí)實(shí)現(xiàn)這個效果您单，有多種方法斋荞，下面逐一介紹。
1虐秦、垂直方向的padding
相信大家對padding都不陌生平酿，但你知道他是如何取值的嗎凤优？
看一下MDN中對padding給出的解釋：
取值
指定一個，兩個蜈彼，三個或四個下列的值：
<長度>可指定非負(fù)的固定寬度. See
<length>for details
<百分比>相對于包含塊的寬度
指定一個值時 該值指定四個邊的內(nèi)邊距
指定兩個值時 第一個值指定上下兩邊的內(nèi)邊距 第二個指定左右兩邊的內(nèi)邊距
指定三個值時 第一個指定上邊的內(nèi)邊距 .第二個指定左右兩邊 第三個指定下邊
指定四個值時分別為上 右 下 左（順時針順序）
也就是說筑辨，給padding的值設(shè)定為百分比時，將根據(jù)父容器的寬度來計算幸逆。
現(xiàn)在假設(shè)我們有一個div棍辕，我們希望它的尺寸能根據(jù)body（它的父容器）的寬度來實(shí)現(xiàn)固定比例：
<div class="box"></div>
樣式部分
.box{
width:50%;
padding-bottom:50%;
}
其實(shí)這里的
padding-bottom換成padding-top也一樣可以實(shí)現(xiàn)。
沒錯还绘，就這么簡單楚昭，我們已經(jīng)實(shí)現(xiàn)了文章開頭所展示的效果。
但是我們使用這種方法的時候需要注意幾點(diǎn)：
- 不需要設(shè)定
height拍顷，最好就是手動設(shè)定為0抚太。 - 子元素需要設(shè)定為絕對定位（父容器為相對定位），否則子元素將被
padding擠出去昔案。
其它比例
前面實(shí)現(xiàn)的是一個正方形比例的尿贫，那如果我想要是16:9的呢？
那我們將根據(jù)一個公式：width * x / y計算踏揣，如下：
.box{
width:50%;
padding-bottom: calc( 50% * 9 / 16 );
/* 或者 */
padding-bottom : 28.125%;
}
2庆亡、視窗單位
視窗是你的瀏覽器實(shí)際顯示內(nèi)容的區(qū)域——換句話說是你的不包括工具欄和按鈕的網(wǎng)頁瀏覽器。這些單位是
vw,vh,vmin和vmax呼伸。它們都代表了瀏覽器（視窗）尺寸的比例和窗口大小調(diào)整產(chǎn)生的規(guī)模改變身冀。
也就是說，網(wǎng)頁的寬度是100vw括享，取一半就是50vw搂根，無論怎么縮放都是一半，而且這個一半不止可以用在width上铃辖。
所以：
<div class="box"></div>
.box{
width:50vw;
height:50vw;
}
一個正方形就出來了剩愧，簡單嗎？娇斩？仁卷？
其它比例
跟上面一樣，通過公式可以得到：
.box{
width:50vw;
padding-bottom: calc( 50vw * 9 / 16 );
/* 或者 */
padding-bottom : 28.125vw;
}
參考鏈接
- https://www.w3cplus.com/css/aspect-ratio.html
- https://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/
- https://blog.csdn.net/qq_36367494/article/details/79266037
結(jié)束語
通過以上兩種方法犬第，以后實(shí)現(xiàn)固定比例的盒子是不是變得簡單起來了锦积？
注：此文為原創(chuàng)文章，如需轉(zhuǎn)載歉嗓，請注明出處丰介。
