前言

前端程式碼的編寫永遠逃不過“相容”二詞，從前PC時代，因為IE的傲嬌，導致程式猿們一直在相容IE的道路上掙扎，如今移動裝置的普及，彷彿讓我們看到了希望，彷彿馬上就要擺脫IE了，可是！一波還未平息，一波又來侵襲~移動端確實不用考慮IE了，各種CSS新特性也用的爽到飛起，但一座大山壓了過來，那就是解析度的適配，移動端由於展示區域比較小，因此對於頁面在不同解析度手機上的展示細節也要求更加嚴格，這時像PC端有些固定寬高的佈局方式顯然不適應，我們被要求對於不同大小手機頁面能自適應，真是非常有（tong）趣（ku）呢

話不多說，下面就總結了一些移動端常用的適配手法：

一、百分比

使用場景：只要求寬度隨螢幕自適應，比如文字塊

百分比在PC端自適應上也經常用到，著實相當好用，但它一般用於寬度自適應的設定，高度設定百分比時，要求其父類元素有明確高度。

1、利用百分比實現填充全屏

為了讓元素設定height：100%生效，並且正好為視窗高度，則需要給html和body元素以及它所有的父元素都設定高度100%。

例如：

`<``html` `style``=``"height: 100%;"``>`
`<``body` `style``=``"height: 100%;"``>`
`<``div`  `class``=``"wrap"` `style``=``"height: 100%; width:100%"``>`
`填充全屏啦`
`</``div``>`
`</``body``>`
`</``html``>`
 

在使用height: 100%;時需要注意的一些事項

• Margins 和 padding 會讓你的頁面出現滾動條，也許這是你不希望的。
• 如果你的元素實際高度大於你設定的百分比高度，那元素的高度會自動擴充套件。

寫到這裡我突然想插個題外話，對於absolute定位的元素，用height：100%顯然也是無效的，因為此時它已經脫離了文件流，此時它的高度由自身內容撐開。這是如果我希望它填滿父盒子，怎麼做？這裡有個黑魔法，設定它的top,left,bottom,right均為0，這時盒子就會被拉伸至填滿父盒子。

2、利用百分比實現寬高比固定

有時，我們希望寬度自適應，高度隨寬度變化而變化，並有固定的寬高比。

讓我們縷縷，用height百分比顯然不行，height百分比是以父元素高度為基準的，而我們需要以寬度為基準來設定高度。

所以這裡可以用到padding-top或者padding-bottom，padding是以父元素的width為基準的。我們可以設定元素的height：0，然後用padding-bottom將元素撐開，以實現固定寬高比。

二、rem

使用場景：對於圖片等對高度自適應有要求的場景

rem單位：以頁面根字型的大小，也就是html元素字型的大小為基準，例如

`html{`
`font-size``:``16px``;`
`}`

那麼1rem等於16px。

所以使用時，我們只要讓根字型大小隨螢幕大小自適應，那頁面中所有使用rem單位來設定寬高的元素，大小也會隨螢幕大小自適應了。

根據不同螢幕大小設定根字型大小有兩種方法：

1、css方法設定rem

利用媒體查詢，根據不同的螢幕大小進行設定，缺點就是一般只列舉一些代表性的螢幕大小，自適應不能充分覆蓋所有範圍

`html{`
`font-size``:``10px`
`}`
`@media` `screen` `and (``min-width``:``321px``) and (``max-width``:``375px``){`
`html{`
`font-size``:``11px`
`}  `
`}`
`@media` `screen` `and (``min-width``:``376px``) and (``max-width``:``414px``){`
`html{`
`font-size``:``12px`
`}`
`}`
`@media` `screen` `and (``min-width``:``415px``) and (``max-width``:``639px``){`
`html{`
`font-size``:``15px`
`}`
`}`
`@media` `screen` `and (``min-width``:``640px``) and (``max-width``:``719px``){`
`html{`
`font-size``:``20px`
`}`
`}`
`@media` `screen` `and (``min-width``:``720px``) and (``max-width``:``749px``){`
`html{`
`font-size``:``22.5px`
`}`
`}`
`@media` `screen` `and (``min-width``:``750px``) and (``max-width``:``799px``){`
`html{`
`font-size``:``23.5px`
`}`
`}`
`@media` `screen` `and (``min-width``:``800px``){`
`html{`
`font-size``:``25px`
`}`
`}`
歡迎加入全棧開發交流划水交流圈：582735936
面向划水1-3年前端人員
幫助突破划水瓶頸，提升思維能力

2、JS方法設定rem

利用JS設定根字型大小，所以若改變發生在渲染完成之後，則會引起迴流，導致閃屏現象。因此使用這種方法時，應將JS程式碼放入head頭部中並且在CSS引入之前。

`(``function` `(doc, win) {`
`var` `docEl = doc.documentElement,`
`resizeEvt =` `'orientationchange'` `in` `window ?` `'orientationchange'` `:` `'resize'``,`
`recalc =` `function` `() {`
`var` `clientWidth = docEl.clientWidth;`
`if` `(!clientWidth)` `return``;`
`docEl.style.fontSize = 20 * (clientWidth / 375) +` `'px'``;`
`};`
`recalc();`
`if` `(!doc.addEventListener)` `return``;`
`win.addEventListener(resizeEvt, recalc,` `false``);`
`})(document, window);`

上面clientWidth為實際螢幕的寬度，而375為設計稿基於的參考螢幕寬度，20則是當實際螢幕寬度等於參考螢幕寬度時，1rem的大小。程式碼的關鍵引數20和375是這樣設定的：

a) 由於提供的設計稿現在基本都是以iPhone6/7/8為參考的，寬度為750px，dpr為2，所以計算rem時的參考螢幕寬度可以設定為375。

b) 由於chrome的最小字型是12px，又為了計算方便，所以可以設定1rem的大小為20px
應用過程中，比如我們拿到了一個750的設計稿，那麼首先，將設計稿裡的數值除以2，得到按手機螢幕大小布局的數值（這也是375的由來）。然後，再除以20就可以將設計稿中的px轉化為rem了。

三、媒體查詢

使用場景：一般利用媒體查詢來進行特殊處理，比如

1、iphoneX這類全屏的適配

2、在適配dpr為3的iPhone Plus或者pad橫屏等超級大屏時，需要根據業務需求設定臨界值，然後展示不同內容或者替換不同解析度圖片（也就是常說的2倍圖、3倍圖的使用）等

四、vw、vh

vw是以螢幕寬度為基準的百分比單位，1vw=1% * deviceWidth

vh是以螢幕高度為基準的百分比單位，1v=1% * deviceHeight

vw,vh確實很好用，但是目前使用時仍需考慮相容性的問題，在國內一些手機自帶瀏覽器裡（比如華為）會失效，並且據說碰上X5核心時也容易踩坑 。

以上就是本文的全部內容，希望對大家的學習有所幫助