怎样让页面宽高成比例显示

平时我们做的H5页面，做好之后不能适配各种手机型号，或者差距特别大，明显宽高变形了，我找到了一种比较简编的方法，可以让他的宽高一直是这个比例显示。

.div{width:100%;height:0;padding-bottom:50%;}

padding-bottom的值就是高和宽的比例。按比例写出的样式，不同型号差别就不是很大。