什么状况须要作自适应呢?最多见的状况就是父元素的宽度不固定形成子元素排版改变。
咱们根据不一样的状况,作不一样的适应。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
可替换元素和其余元素不一样,它们自己有像素宽度和高度的概念。咱们能够自适应一边的值,另外一边经过auto自动计算 。code
padding-bottom
htm
一直被忽视的一个知识点,垂直方向上的内外边距使用百分比作单位时,是基于包含块的宽度来计算的。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; }