移动端布局,div按比例布局,宽度为百分比,但又想让高度和宽度一样,即让div为正方形,怎么做布局呢?

一个div宽度比例width:20%,比如是屏幕宽度的20%,想让高度和宽度一样,即让这个div是正方形,怎么实现呢?因为做的是移动端,屏幕宽度不定,又想让这个div盒子宽高一样,呈现为正方形。怎么办呢
关注者
170
被浏览
19904
我觉得这个是你要的效果:

body {
  width: 100%;
  font-size: 0;
  text-align: center;
}
div{
  display: inline-block;
  width: 20%;
  background: green;
  font-size: 12px;
  position: relative;
  vertical-align: middle;
  
  
  &:nth-child(2n){
    background: orange;
  }
  
  &:before {
    content:"";
    display: inline-block;
    padding-bottom: 100%;
    width: .1px;
    vertical-align: middle;
  }
  span {
    display: inline-block;
    vertical-align: middle;
    font-size: 4em;
    color: #fff;
  }
}

CodePen - A Pen by Airen

效果如下图: