問題意義

對不同手機(jī)寬度進(jìn)行自適應(yīng)

方法一

使用vw(viewport width)單位

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

方法二

設(shè)置垂直padding值為與width相等的百分比值。

css知識點(diǎn)：margin/padding取形式為百分比的值時，無論是left/right，還是top/bottom，都是以父元素的width為參照物的！

代碼：

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

不寫hegith:0的話，正方形內(nèi)有內(nèi)容時，正方形會溢出

方法三

利用容器，與方法二原理相同，利用偽元素實(shí)現(xiàn)

.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>

關(guān)于圖片自適應(yīng)

自適應(yīng)正方形中間的內(nèi)容通常為圖片，這時候中間的圖片也需要自適應(yīng)，以下是圖片自適應(yīng)的方法

1. background-image的做法：

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

background-size為cover時布滿盒子，為contain時根據(jù)自己最寬邊完全展示圖片

2. img標(biāo)簽的做法：

object-fit (https://developer.mozilla.org/zh-CN/docs/Web/CSS) 屬性指定可替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框。
可以通過使用 object-position 屬性來切換被替換元素的內(nèi)容對象在元素框內(nèi)的對齊方式。

object-fit 屬性取值：fill | contain | cover | none | scale-down
contain：保持寬高比縮放與當(dāng)前標(biāo)簽同大
cover：裁剪
fill：拉伸
none被替換的內(nèi)容將保持其原有的尺寸。
scale-down內(nèi)容的尺寸與 none 或 contain 中的一個相同，取決于它們兩個之間誰得到的對象尺寸會更小一些。