描述
在開發過程中，會有這麼一個情況，需要將一個盒子的尺寸定義為固定比例，且尺寸需根據檢視的尺寸來進行縮放，也就是響應式，常見的多如有矩形、圓形等。
下面我將使用下面的例子為大家進行講解：
正文
其實實現這個效果，有多種方法，下面逐一介紹。
1、垂直方向的padding
相信大家對padding都不陌生，但你知道他是如何取值的嗎？
看一下MDN中對padding給出的解釋：
取值
指定一個，兩個，三個或四個下列的值：
<長度>可指定非負的固定寬度. See
<length>for details
<百分比>相對於包含塊的寬度
指定一個值時 該值指定四個邊的內邊距
指定兩個值時 第一個值指定上下兩邊的內邊距 第二個指定左右兩邊的內邊距
指定三個值時 第一個指定上邊的內邊距 .第二個指定左右兩邊 第三個指定下邊
指定四個值時分別為上 右 下 左（順時針順序）
也就是說，給padding的值設定為百分比時，將根據父容器的寬度來計算。
現在假設我們有一個div，我們希望它的尺寸能根據body（它的父容器）的寬度來實現固定比例：
<div class="box"></div>
複製程式碼樣式部分
.box{
width:50%;
padding-bottom:50%;
}
複製程式碼其實這裡的
padding-bottom換成padding-top也一樣可以實現。
沒錯，就這麼簡單，我們已經實現了文章開頭所展示的效果。
但是我們使用這種方法的時候需要注意幾點：
- 不需要設定
height，最好就是手動設定為0。 - 子元素需要設定為絕對定位（父容器為相對定位），否則子元素將被
padding擠出去。
其它比例
前面實現的是一個正方形比例的，那如果我想要是16:9的呢？
那我們將根據一個公式：width * x / y計算，如下：
.box{
width:50%;
padding-bottom: calc( 50% * 9 / 16 );
/* 或者 */
padding-bottom : 28.125%;
}
複製程式碼2、視窗單位
視窗是你的瀏覽器實際顯示內容的區域——換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。這些單位是
vw,vh,vmin和vmax。它們都代表了瀏覽器（視窗）尺寸的比例和視窗大小調整產生的規模改變。
也就是說，網頁的寬度是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;
}
複製程式碼參考連結
結束語
通過以上兩種方法，以後實現固定比例的盒子是不是變得簡單起來了？
注：此文為原創文章，如需轉載，請註明出處。