通過css控制響應式寬高比例

在做響應式頁面的時候，控制寬度隨螢幕寬度變化，可以利用百分比。但是設定高度的百分比是沒有效果的，況且想要獲得裝置的高度又必須寫相關的js檔案，或引入相關的框架。這裡少說也要十幾行js程式碼，現在只需要加一一行程式碼可以控制寬高的比例。

<div style="width: 50%; position: relative; padding-bottom: 30%;">
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:paleturquoise;">
        div 固定寬高的比例，會隨著視窗的大小變化而變化哦，把這段代拷貝到你的html某個地方，在瀏覽器上面預覽，試下調整瀏覽器的視窗大小。
    </div>
</div>
複製程式碼

這裡寬度

width: 50%   //是佔視窗的50%
複製程式碼

高度比例

padding-bottom: 30%;          //高度比例是佔螢幕寬度的30%
複製程式碼

圖1：

圖2：

當然還可以通過改變百分比來除錯你的div大小。