响应式开发: 宽高等比例缩放

响应式开发: 宽高等比例缩放

<style>
    .box {width: 20%;height:0;padding-bottom:20%;background-color:red;}
</style>
<div class="box">
    hello world
</div>

原理: 这里涉及到百分比布局的问题;百分比布局中，元素的宽高是继承自父级元素，而元素的其他属性，如padding,margin等，都是依托父元素的宽度*百分比计算出来的。所以这里设置高为0；因为高是继承自父元素的高度；而采用padding-bottom来撑开高度则因为其与元素的宽度一样都是受父元素的宽度所影响的。 
结论: 
百分比布局: 
元素的高度 = 父元素的高度 * 百分比； 
元素的其他距离属性 = 父元素的宽度 * 百分比；