關于移動端的適配，最近很多朋友在問我這個適配問題究竟該怎么適配途凫，怎么書寫垢夹，以及橫屏之后的影響，今 天就寫一篇關于移動端適配的問題维费。
首先是對整個頁面的font-size的設置果元，我比較常用的有兩種方案：
方案1.利用js對頁面寬度進行檢測并且進行計算絕對值的計算，具體比例計算為40px：1rem犀盟；計算公式如下：
document.documentElement.style.fontSize =document.documentElement.clientWidth /360 *20 +'px';
window.onresize =function() {
document.documentElement.style.fontSize =document.documentElement.clientWidth /360 *20 +'px';
}
此方法的適用性較為廣泛而晒，但部分問題較為尖銳：如計算得出的為浮點數(shù)值，瀏覽器解析之后產(chǎn)生偏差等且蓬！
方案2.在加載css格式化文件的時候欣硼，加入媒體查詢設置font-size，css公式如下：
@media screen and (max-width: 750px){
? ? html{font-size:30px;}
}
@media screen and (min-width:640px) and (max-width:749px){
? ? html{font-size:25px; }
}
@media screen and (min-width:480px) and (max-width:639px){
? ? html{font-size:20px; }
}
@media screen and (min-width:320px) and (max-width:479px){
? ? html{font-size:15px; }
}
此方案的比例換算根據(jù)UI給定的PSD的尺寸恶阴，在750*1334的尺寸下為30px：1rem（即目前主流的手機像素比诈胜，若項目PSD為更大尺寸時，請設置適當?shù)膶挾缺O(jiān)控及font-size大蟹胧隆）焦匈，此方案存在有一些弊端，但是總體來說可用部分昵仅，某些情況下會出現(xiàn)頁面坍塌的問題缓熟！
現(xiàn)在詳細解釋一下兩種方案：
方案1的程式最大的弊端就是浮點數(shù)的差值，此差值解決之后摔笤，整個方案能夠適用于任何項目够滑，但一直沒有找到更好的解決辦法，我目前在用的解決方案就是行內(nèi)橫向寬度能用百分比固定時盡量使用百分比固定吕世，若存在某項寬度必須固定彰触，而另一個不必固定的時候我的解決方案為：A內(nèi)有B和C兩個塊，B塊計算的寬度為6rem命辖，而C塊若寬度寫死况毅，在不同屏幕尺寸下會坍塌，故給A一個padding值尔艇，使B定位到padding之上尔许，A剩下的空間全部給C，C的寬高全100%终娃；目前此方案暫時在項目里還未曾出現(xiàn)問題味廊。
方案2的最大問題就是設置寬高的時候，無法隨著屏幕拓展進行等比例縮放，經(jīng)查問題和方案1所出問題基本一致毡们，方案1的解決方案理論上能在方案2上同樣適用（本人上家公司的項目使用方案2迅皇，但未遇到此問題，此問題是自己在寫混合式App時所遇到衙熔，解決方案較為復雜，不推薦搅荞，推薦方案1的解決方案）红氯，有興趣的朋友可以嘗試一下。
此兩種方案咕痛，基本滿足目前大多數(shù)項目的開發(fā)痢甘，可能方案2 的比例不同，但結果都是一樣的茉贡，歡迎大家指導建議塞栅！
