通过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大小。

转载于:https://juejin.im/post/5a3217da6fb9a04500031248