不定寬度元素排版及子元素固定寬高比問題
常見的排版自適應問題
什麼情況需要做自適應呢?最常見的情況就是父元素的寬度不固定造成子元素排版改變。
我們根據不同的情況,做不同的適應。
固定個數,不固定大小
父級元素寬度改變時,子元素大小也隨著改變,子元素的寬高參照同一標準計算的單位,例如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;
}