關(guān)于移動(dòng)端的適配，最近很多朋友在問我這個(gè)適配問題究竟該怎么適配，怎么書寫，以及橫屏之后的影響，今 天就寫一篇關(guān)于移動(dòng)端適配的問題。
首先是對(duì)整個(gè)頁(yè)面的font-size的設(shè)置，我比較常用的有兩種方案：
方案1.利用js對(duì)頁(yè)面寬度進(jìn)行檢測(cè)并且進(jìn)行計(jì)算絕對(duì)值的計(jì)算，具體比例計(jì)算為40px：1rem；計(jì)算公式如下：
document.documentElement.style.fontSize =document.documentElement.clientWidth /360 *20 +'px';
window.onresize =function() {
document.documentElement.style.fontSize =document.documentElement.clientWidth /360 *20 +'px';
}
此方法的適用性較為廣泛，但部分問題較為尖銳：如計(jì)算得出的為浮點(diǎn)數(shù)值，瀏覽器解析之后產(chǎn)生偏差等！
方案2.在加載css格式化文件的時(shí)候，加入媒體查詢?cè)O(shè)置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（即目前主流的手機(jī)像素比，若項(xiàng)目PSD為更大尺寸時(shí)，請(qǐng)?jiān)O(shè)置適當(dāng)?shù)膶挾缺O(jiān)控及font-size大?。?，此方案存在有一些弊端，但是總體來說可用部分，某些情況下會(huì)出現(xiàn)頁(yè)面坍塌的問題！
現(xiàn)在詳細(xì)解釋一下兩種方案：
方案1的程式最大的弊端就是浮點(diǎn)數(shù)的差值，此差值解決之后，整個(gè)方案能夠適用于任何項(xiàng)目，但一直沒有找到更好的解決辦法，我目前在用的解決方案就是行內(nèi)橫向?qū)挾饶苡冒俜直裙潭〞r(shí)盡量使用百分比固定，若存在某項(xiàng)寬度必須固定，而另一個(gè)不必固定的時(shí)候我的解決方案為：A內(nèi)有B和C兩個(gè)塊，B塊計(jì)算的寬度為6rem，而C塊若寬度寫死，在不同屏幕尺寸下會(huì)坍塌，故給A一個(gè)padding值，使B定位到padding之上，A剩下的空間全部給C，C的寬高全100%；目前此方案暫時(shí)在項(xiàng)目里還未曾出現(xiàn)問題。
方案2的最大問題就是設(shè)置寬高的時(shí)候，無法隨著屏幕拓展進(jìn)行等比例縮放，經(jīng)查問題和方案1所出問題基本一致，方案1的解決方案理論上能在方案2上同樣適用（本人上家公司的項(xiàng)目使用方案2，但未遇到此問題，此問題是自己在寫混合式App時(shí)所遇到，解決方案較為復(fù)雜，不推薦，推薦方案1的解決方案），有興趣的朋友可以嘗試一下。
此兩種方案，基本滿足目前大多數(shù)項(xiàng)目的開發(fā)，可能方案2 的比例不同，但結(jié)果都是一樣的，歡迎大家指導(dǎo)建議！
