不定寬度元素排版及子元素固定寬高比問題

常見的排版自適應問題

什么情況需要做自適應呢?最常見的情況就是父元素的寬度不固定造成子元素排版改變。
我們根據不同的情況，做不同的適應。

固定個數，不固定大小

父級元素寬度改變時，子元素大小也隨着改變，子元素的寬高參照同一標准計算的單位，例如vw以可視頁面寬度計算，rem以html的font-size計算等，效果如下

不固定個數，固定大小

父級元素寬度改變，子元素的大小不變，改變一排能夠容納的最大個數。
這時候子元素的寬高值都不需要改變，當然就不需要自適應了。但是因為父元素一排可以容納最多的子元素並不是一個剛好的值，剩余空位無論如何分布，都是非常不美觀的。效果如下：

不固定個數，不固定大小

父級元素寬度改變，子元素的大小，一排能夠容納的最大個數都隨着改變。
此時實現子元素的寬度自適應，該元素具有最小寬度和最大寬度，實際寬度根據父元素的寬度和一排至少能放下的個數共同決定。頁面效果是不是美觀多了呢？

{
        display: grid;
        height: auto;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

排版問題解決，接下來就需要想辦法設置未知寬度元素的高度，達到固定寬高比的效果

未知的元素固定寬高比

參考來源：https://www.jb51.net/css/714251.html

可替換元素（img，video）

可替換元素和其他元素不同，它們本身有像素寬度和高度的概念。我們可以自適應一邊的值，另一邊通過auto自動計算 。

普通元素

padding-bottom

一直被忽視的一個知識點，垂直方向上的內外邊距使用百分比做單位時，是基於包含塊的寬度來計算的。

利用這個特性，我們可以創建一個沒有實際作用的空盒子，如果我們需要填充內容，那么就需要使用絕對定位在內部再創造一個容器。

.one-box {
        width: calc(100% - 0.7vw);
        margin: 0 auto;
        height: 0;
        padding-bottom: 115%;
        margin-bottom: 0.7vw;
        background: #fffa;
      }

aspect-ratio 屬性指定元素寬高比

瀏覽器還未支持

aspect-ratio 的語法格式如下：aspect-ratio: <widtu-ratio>/<height-ratio> 。

如下，我們可以將 width 或 height 設為 auto ，然后指定 aspect-ratio 。另一個值就會按照比例自動變化。

/* 高度隨動 */
.box1 {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
/* 寬度隨動 */
.box2 {
height: 100%;
width: auto;
aspect-ratio: 16/9;
}