寬高自適應

2021-10-02 22:03:39 字數 739 閱讀 4814

網頁布局中經常要定義元素的寬和高。但是很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是自適應

元素自適應在網頁布局中非常重要,他能夠使網頁顯示更加靈活,可以適應在不同裝置、不同視窗和不同解析度下顯示

1.寬度自適應

元素寬度設定為100%(塊元素寬度預設為100%)

2.元素具備最小高度的自適應

min-height屬性:最小高度:可以讓 內容少的時候仍然保持一定的高度

其他屬性:

min-height(最小高度)

max-height(最大高度)

min-width(最小寬度)

max-width(最大寬度)

3.高度自適應

元素高度自適應視窗高度

設定方法:html,body

需要自適應的元素:height:100%;

自適應元素高度:

父元素:height:value

需要自適應父元素高度的子元素:height:100%;

height:auto是指根據塊內內容自動調節高度。

height:100%,是指其相對父塊高度而定義的高度,也就是按照離它最近且有定義高度的父層的高度來定義高度

最後提一句整合…

一般比較大的**可能需要用,主要原理就是把許多整合成一張,比如許多小圖示,把他們合在一張圖上 ,然後布局的時候利用background-position屬性來對進行移動,實現想要的布局效果,這樣做可以減少體積,還可以降低伺服器響應次數

寬高自適應

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

寬高自適應

寬高自適應可以使得網頁更加靈活,適應在不同的裝置不同解析度下。一 pc端寬高自適應 相對視窗或者父元素的自適應情況 寬度自適應 width 100 預設情況下,不新增定位時 寬度自適應的比例,是參照父元素的寬度進行顯示的,也就是說,如果元素的父元素是整個頁面的話,顯示的時候就是鋪滿整個螢幕 如果當父...

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