纯css制作自适应正方形(宽度百分比)


1. 设置垂直方向的padding撑开容器
   
/* 宽度设置百分比时制作一个正方形 */
     .div3 {
       width: 20% ;
       /*基于父级的宽度设置*/
       padding-top: 20% ; /* 或者padding-bottom: 20%; */
       background: red ;
    }



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

.div4 {
width: 20% ;
height: 20vm ;
background: red ;
}



猜你喜欢

转载自blog.csdn.net/candy_mi/article/details/80512599