纯css实现自适应正方形(宽度百分比)

1.设置垂直方向的padding撑开容器
   

/* 宽度设置百分比时制作一个正方形 */

    .div3{

      width: 20%;

      /*基于父级的宽度设置*/

      padding-top: 20%; /* 或者padding-bottom: 20%; */

      background: red;

    }

 

 

2.使用vm单位（vm相对于可视区域百分比的长度单位1vm=1%可视区宽度）

 

.div4 {

width: 20%;

height: 20vw;

background: red;

}