纯CSS实现自适应正方形
案例HTML模板
<div class="square-box"></div>
方案一：利用CSS3中的vw单位来处理
在CSS3 中新增了一组相对于可视区域百分比的长度单位：vw, vh, vmin, vmax。
- 1vw = 1% viewport width
- 1vh = 1% viewport height
- vmin表示视口高度和宽度之间的最小值的1%
- vmax表示视口高度和宽度之间的最大值的1%
本方案样式如下：
.square-box{
width:100%;
height:100vw;
}
方案优缺点
优点
- 简洁方便
缺点
- 浏览器兼容性不好，旧版本浏览器不支持
- vw, vh, vmin, vmax等单位均是相对于视口，适用性不高
方案二：设置垂直方向的padding撑开容器
本方案样式如下：
.square-box{
width:100%;
height:0;
padding-bottom:100%;
}
方案优缺点
优点
- 简洁明了
- 且兼容性好
缺点
- max-height失效，盒子不收缩
方案三：利用伪元素的 margin(padding)-top 撑开容器
.square-box{
width: 100%;
overflow: hidden;
}
.square-box:after{
content: '';
display: block;
margin-top: 100%;
}
