前言
前端代碼的編寫永遠逃不過“兼容”二詞，從前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內核時也容易踩坑 。
以上就是本文的全部內容，希望對大家的學習有所幫助