常见的排版自适应问题

什么状况须要作自适应呢?最多见的状况就是父元素的宽度不固定形成子元素排版改变。
咱们根据不一样的状况，作不一样的适应。css

固定个数，不固定大小

父级元素宽度改变时，子元素大小也随着改变，子元素的宽高参照同一标准计算的单位，例如vw以可视页面宽度计算，rem以html的font-size计算等，效果以下

html

不固定个数，固定大小

父级元素宽度改变，子元素的大小不变，改变一排可以容纳的最大个数。
这时候子元素的宽高值都不须要改变，固然就不须要自适应了。可是由于父元素一排能够容纳最多的子元素并非一个恰好的值，剩余空位不管如何分布，都是很是不美观的。效果以下：

浏览器

不固定个数，不固定大小

父级元素宽度改变，子元素的大小，一排可以容纳的最大个数都随着改变。
此时实现子元素的宽度自适应，该元素具备最小宽度和最大宽度，实际宽度根据父元素的宽度和一排至少能放下的个数共同决定。页面效果是否是美观多了呢？ide

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

排版问题解决，接下来就须要想办法设置未知宽度元素的高度，达到固定宽高比的效果.net

未知的元素固定宽高比

参考来源：https://www.jb51.net/css/714251.html3d

可替换元素（img，video）

可替换元素和其余元素不一样，它们自己有像素宽度和高度的概念。咱们能够自适应一边的值，另外一边经过auto自动计算 。code

普通元素

padding-bottomhtm

一直被忽视的一个知识点，垂直方向上的内外边距使用百分比作单位时，是基于包含块的宽度来计算的。blog

利用这个特性，咱们能够建立一个没有实际做用的空盒子，若是咱们须要填充内容，那么就须要使用绝对定位在内部再创造一个容器。rem

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