寬高自適應

2021-10-21 18:32:53 字數 450 閱讀 6693

寬高自適應可以使得網頁更加靈活,適應在不同的裝置不同解析度下。

一、pc端寬高自適應:相對視窗或者父元素的自適應情況

寬度自適應 width:100%;

預設情況下,(不新增定位時)寬度自適應的比例,是參照父元素的寬度進行顯示的,也就是說,如果元素的父元素是整個頁面的話,顯示的時候就是鋪滿整個螢幕;如果當父元素為500px,或者父元素為50%時,子元素的寬度設定為width:100%;的時候,子元素的寬度是等同於父元素的寬度,而不是相對於網頁顯示100%。

高度自適應

高度自適應同樣也是使用百分比的方式,但是需要注意的是,當元素的高度相對於瀏覽器視窗,顯示百分比的時候,必須要給html和body新增高度100%。

同樣,高度的百分比顯示大小,也是相對於距離該元素最近的父元素大小的值,進行顯示的。

html,body

寬高自適應

網頁布局中經常要定義元素的寬和高。但是很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是自適應 元素自適應在網頁布局中非常重要,他能夠使網頁顯示更加靈活,可以適應在不同裝置 不同視窗和不同解析度下顯示 1.寬度自適應 元素寬度設定為100 塊元素寬度預設為100 2.元素具備最小高度的自...

寬高自適應

寬高自適應 靈活 網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是pc自適應。自適應的優點 元素自適應在網頁布局中非常重要,它能夠使網頁顯示更靈活,可以適應在不同裝置 不同視窗和不同解析度下顯示。一 相對視窗和父元素的自適應寫法 寬度 width 1...

css image自適應寬高

width 100 height 100 object fit cover 關鍵屬性 object fit fill object fit contain object fit cover object fit none object fit scale down 全域性屬性 object fit ...