- 通过百分比(%)和宽高比
- 通过vw或者vh
- 通过百分比(%)+ padding-top 或者 padding-bottom
- 以上列举三种方法,还有其他方法请各路大神评论区展示
展示
<style>* {margin: 0;padding: 0;}.box {width: 20%;aspect-ratio: 1 / 1;background: #45b007;}.box1 {width: 50vw;height: 50vw;background: #111111;}.box3{width: 40%;padding-top: 40%;background: #c00909;}</style><body><!-- <div class="box"></div> --><!-- <div class="box1"></div> --><!-- <div class="box3"></div> --></body>