Css实现自适应屏幕宽度的正方形

思路，正方形，长宽都一样，需要找到一个标准值然后再去设置盒子模型，可以用padding，margin, width/height,
正题开始
1. 使用padding，原因，百分比是基于父元素的宽度，所以如果是根据父盒子的百分比来算，则可以使用这个方法
具体代码如下

<div class="square"></div>

.square {
    display: inline-block;
    padding: 0 20% 20% 0;
    background: red;
}

2. padding+flex，适合做多个正方形，同样利用padding撑开盒子模型，使高度与宽度相同

<div class="square-wrapper">
    <div class="square"></div>
    <div class="square"></div>
</div>

.square-wrapper {
    display: flex;
}
.square {
    flex: 1;
}
.square::after {
    content: "";
    display: block;
    padding-bottom: 100%;
    background: #000;
}

3. 相同原理也可以使用在内部元素加margin来完成撑开盒子

.square-wrapper {
    display: flex;
}
.square {
    flex: 1;
    background: #000;
}
.square::after {
    content: "";
    display: block;
    margin-bottom: 100%;
}

4. rem / em 都是同一个值，rem取到的是html标签的font-size，em是父元素的font-size，同样是固定的
5. 使用vw，表示将屏幕的宽度切割成100份，然后也可以完美适应各种屏幕（这里的屏幕指的是包含这个document对象的容器，如果在浏览器打开，那么就是浏览器内部可展示的宽度；如果在iframe中打开，就是iframe的宽度）

.square {
    width: 20vw;
    background: #000;
}
.square::after {
    content: "";
    display: block;
    padding-bottom: 100%;
    // margin-bottom: 100%; // 也可以
}

暂时就想到这么多了。如果你有更好的，可以留言告诉我哦~