移动端布局，div按比例布局，宽度为百分比，高度和宽度一样，即让div为正方形

Posted 2020-07-28 JeremyLee87

http://codepen.io/airen/details/XbVBZo

<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<div><span>9</span></div>
<div><span>10</span></div>

SCSS代码：

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

CSS代码：

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;
}
div:nth-child(2n) {
  background: orange;
}
div:before {
  content: "";
  display: inline-block;
  padding-bottom: 100%;
  width: .1px;
  vertical-align: middle;
}
div span {
  display: inline-block;
  vertical-align: middle;
  font-size: 4em;
  color: #fff;
}