前端頁面高度和寬度自適應怎麼做？

      在前端頁面開發中，我們會希望頁面可以根據不同使用者的顯示比例自動縮放頁面，確保使用者體驗，這就是PC自適應，下面小千就來給大家介紹一下應該怎麼做和集中常見的問題解決方案，記得收藏起來遇到問題來看一看。

      自適應的優點：

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

      寬度自適應

      元素寬度設定為100%。（塊元素寬度預設為100%），或者不設定寬度（width）;（寬度是父元素的寬度）

      高度自適應

      1)自適應元素高度：height:auto;或者不設定;（是子元素撐開父元素的高度）

      2)元素高度自適應視窗高度，設定方法：html,body{height:100%;}

      注：如果設定子元素的高度跟隨父元素的高度變化而變化，那麼父元素必須有高度。

      最小高度的自適應

      min-height屬性：最小高度；(IE6瀏覽器不識別該屬性)

      hack1:min-height:value;_height:value;

      hack2:min-height:value; height:auto!important;height:value;

      浮動元素父元素高度自適應（高度塌陷）

      當子元素有浮動並且父元素沒有高度的情況下父元素會出現高度塌陷

      高度塌陷的解決方法

      hack1：給父元素新增宣告overflow:hidden;(觸發一個BFC)

      hack2: 在浮動元素下方新增空div,並給該元素新增

      宣告：div{clear:both; height:0; overflow:hidden;}

      hack3:萬能清除浮動法

      visibility:hidden/隱藏

      visibility:hidden;和display:none;的區別：

      visibility:hidden;屬性會使物件不可見，但該物件在網頁所佔的空間沒有改變，等於留出了一塊空白區域，而 display:none屬性會使這個物件徹底消失不顯示，也不再佔用位置。

      偽物件選擇符

      1）、::after : 與content屬性一起使用，定義在物件後的內容。

      語法：選擇符:：after{content:”文字”;}

      選擇符:：after{content:url(圖片路徑)；}

      如：div::after{content:url(logo.jpg);}

      div::after{content:"文字內容";}

      2）、::before: 與content屬性一起使用,定義在物件前的內容。

      div::before{content:"在其前放內容";}

      3）、::first-letter 定義物件內第一個字元的樣式。

      說明：*(該偽元素只能用於塊級元素)

      4）、::first-line:定義物件內第一行的樣式。

      *(該偽元素只能用於塊級元素。)

      以上就是關於前端頁面寬高自適應的介紹了，希望能幫到大家。