怎么样实现一个自适应的正方形？

(1) 先来介绍几个CSS3的属性：

    vw：相对于浏览器可视区域宽度的 1%
    vh：相对于浏览器可视区域高度的 1%

比如：有个元素宽 1000px 高 800px
那么，

50vw = 500px
50vh = 400px

所以，实现一个自适应正方形：

<div class="vw">hello,viewport</div>
.vw {
    width: 50%;
    height: 50vw;
    background: #ccc;
}

(2) padding-bottom

<div class="placeholder"></div>

.placeholder{
    width: 100%;
    padding-bottom: 100%; // padding 百分比相对于父元素宽度来计算
    height: 0;   // 避免被内容撑开多余的高度
}