在前端頁面開發(fā)中，我們會(huì)希望頁面可以根據(jù)不同用戶的顯示比例自動(dòng)縮放頁面，確保用戶體驗(yàn)，這就是PC自適應(yīng)，下面小千就來給大家介紹一下應(yīng)該怎么做和集中常見的問題解決方案，記得收藏起來遇到問題來看一看。
自適應(yīng)的優(yōu)點(diǎn)：
元素自適應(yīng)在網(wǎng)頁布局中非常重要，它能夠使網(wǎng)頁顯示更靈活，可以適應(yīng)在不同設(shè)備、不同窗口和不同分辨率下顯示。
寬度自適應(yīng)
元素寬度設(shè)置為100%。（塊元素寬度默認(rèn)為100%），或者不設(shè)置寬度（width）;（寬度是父元素的寬度）
高度自適應(yīng)
1)自適應(yīng)元素高度：height:auto;或者不設(shè)置;（是子元素?fù)伍_父元素的高度）
2)元素高度自適應(yīng)窗口高度，設(shè)置方法：html,body{height:100%;}
注：如果設(shè)置子元素的高度跟隨父元素的高度變化而變化，那么父元素必須有高度。
最小高度的自適應(yīng)
min-height屬性：最小高度；(IE6瀏覽器不識(shí)別該屬性)
hack1:min-height:value;_height:value;
hack2:min-height:value; height:auto!important;height:value;
浮動(dòng)元素父元素高度自適應(yīng)（高度塌陷）
當(dāng)子元素有浮動(dòng)并且父元素沒有高度的情況下父元素會(huì)出現(xiàn)高度塌陷
高度塌陷的解決方法
hack1：給父元素添加聲明overflow:hidden;(觸發(fā)一個(gè)BFC)
hack2: 在浮動(dòng)元素下方添加空div,并給該元素添加
聲明：div{clear:both; height:0; overflow:hidden;}
hack3:萬能清除浮動(dòng)法
visibility:hidden/隱藏
visibility:hidden;和display:none;的區(qū)別：
visibility:hidden;屬性會(huì)使對(duì)象不可見，但該對(duì)象在網(wǎng)頁所占的空間沒有改變，等于留出了一塊空白區(qū)域，而 display:none屬性會(huì)使這個(gè)對(duì)象徹底消失不顯示，也不再占用位置。
偽對(duì)象選擇符
1）、::after : 與content屬性一起使用，定義在對(duì)象后的內(nèi)容。
語法：選擇符:：after{content:”文字”;}
選擇符:：after{content:url(圖片路徑)；}
如：div::after{content:url(logo.jpg);}
div::after{content:"文本內(nèi)容";}
2）、::before: 與content屬性一起使用,定義在對(duì)象前的內(nèi)容。
div::before{content:"在其前放內(nèi)容";}
3）、::first-letter 定義對(duì)象內(nèi)第一個(gè)字符的樣式。
說明：*(該偽元素只能用于塊級(jí)元素)
4）、::first-line:定義對(duì)象內(nèi)第一行的樣式。
*(該偽元素只能用于塊級(jí)元素。)
以上就是關(guān)于前端頁面寬高自適應(yīng)的介紹了，最后歡迎對(duì)前端開發(fā)培訓(xùn)感興趣的同學(xué)來到千鋒web前端培訓(xùn)班了解一下我們的大前端培訓(xùn)課程，全程名師面授還有兩周免費(fèi)試聽，現(xiàn)在咨詢更有免費(fèi)前端學(xué)習(xí)資料可以領(lǐng)取，還在等什么？快來獲取學(xué)習(xí)教程吧。
京公網(wǎng)安備 11010802030320號(hào)