纯CSS实现自适应浏览器宽度的正方形有以下三种方法：CSS3 vw 单位、设置垂直方向的padding撑开容器、利用伪元素的 margin(padding)-top 撑开容器
方案一:CSS3 vw 单位
#square{
width:30%;
height:30vw;
background:red;
}
方案二：设置垂直方向的padding撑开容器
#square{
width:30%;
height:0;
padding-bottom: 30%;
background:red;
}
方案三：利用伪元素的 margin(padding)-top 撑开容器
#square{
width:30%;
background:red;
overflow:hidden;
max-width:200px;
}
#square:after{
content: '';
display: block;
margin-top:100%;
}
#square{
width:30%;
background:red;
max-width:200px;
}
#square:after{
content: '';
display: block;
padding-top:100%;
}
来源：http://blog.csdn.net/zhouziyu2011/article/details/70159209
服务热线 19970861797
