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

}