正方形_自适应_移动端

方法一：

　　在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。

　　按照规定，margin, padding 的百分比数值是相对 父元素 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了。　　

　　padding的百分比是按照宽度来计算的。但是padding是不包含盒子内容的，所以我们把盒子高度设置为0。

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

方法二：

.placeholder {
 width: 20vw
 height: 20vw;
}