问题意义

对不同手机宽度进行自适应

方法一

使用vw(viewport width)单位

.square {
    width: 50%;
    height: 50vw;
    background: #ccc;
}

方法二

设置垂直padding值为与width相等的百分比值。

css知识点：margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！

代码：

.square {
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    background-color: aqua;
}

不写hegith:0的话，正方形内有内容时，正方形会溢出

方法三

利用容器，与方法二原理相同，利用伪元素实现

.square {
    position: relative;
    background: aqua;
}
.square:after {
    content: '';
    display: block;
    padding-top: 100%;
}
.square-inner {
    width:100%;
    height:100%;
    position: absolute; 
}
.square-width{
    width: 15vw;
}

<div class="square square-width">
    <div class="square-inner">
        qaq
    </div>
</div>

关于图片自适应

自适应正方形中间的内容通常为图片，这时候中间的图片也需要自适应，以下是图片自适应的方法

1. background-image的做法：

.image{
    background: url(./img.jpg) no-repeat ;
    background-size:cover; 
    background-position: center;
}

background-size为cover时布满盒子，为contain时根据自己最宽边完全展示图片

2. img标签的做法：

object-fit (https://developer.mozilla.org/zh-CN/docs/Web/CSS) 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。

object-fit 属性取值：fill | contain | cover | none | scale-down
contain：保持宽高比缩放与当前标签同大
cover：裁剪
fill：拉伸
none被替换的内容将保持其原有的尺寸。
scale-down内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。