方式1
/* 兼容性好 */
.use-transform {
width: 10%;
height: 0;
padding-bottom: 10%;
border: 1px solid #000;
}
方式2
使用 vw: 为什么不用%? % 是相对于父元素的大小设定的比率,body默认的宽度为视窗的宽度,没有内容时高度为0,而vw、vh 是视窗大小决定的,不取决于内容。vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度。如下图:
/* 简单方便,兼容性 */
.demo {
width: 10%;
height: 10vw;
border: 1px solid #000;
}
html
<div class="use-transform">
正方形
正方形
正方形
正方形
正方形
正方形
正方形
</div>
<div class="demo">
正方形
正方形
正方形
正方形
正方形
正方形
正方形
</div>
效果
参考