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

常見的排版自適應問題

什麼狀況須要作自適應呢?最多見的狀況就是父元素的寬度不固定形成子元素排版改變。
咱們根據不一樣的狀況，作不一樣的適應。

固定個數，不固定大小

父級元素寬度改變時，子元素大小也隨着改變，子元素的寬高參照同一標準計算的單位，例如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;
}