响应式、手机端、自适应 百分比实现div等宽等高的方法

在百分比布局中, 有时候会遇见一个头疼的问题,就是如果某个布局是正方形的话，我们在这种情况下考虑到适应各种媒体尺寸，又不能给它定固定的宽高。

之前遇见过纯色布局的结果我就用纯色图片代替实现的，现在有了这个方法，再也不用担心高度不等于宽度的问题了。

用这个方法的话无论你设置的宽度是%几，它的高度都和你的宽度相等

 

<!DOCTYPE HTML>
<html>
<head>
<style>
.father {
    width: 50%;  /*改一下宽度试试看*/

}
.daughter {
    width: 100%; height: 0;
    padding-top: 100%;
    background: #ff7500;;
}
</style>
</head>
<body>

<div class = "father">
    <div class = "daughter"></div>    
</div>

 

posted @ 2017-06-29 16:04  <_/>  阅读(1146)  评论(0)  编辑  收藏  举报