纯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%;
}

参考链接

posted @ 2017-03-02 14:13  DaMingGe  阅读(554)  评论(0编辑  收藏  举报