認(rèn)識(shí)移動(dòng)端

做適配方案之前先認(rèn)識(shí)下移動(dòng)端，熟悉移動(dòng)端和pc端的區(qū)別和特點(diǎn)，才能真正理解做適配的精髓，這里就簡(jiǎn)單介紹下；

網(wǎng)上找不到主流android設(shè)備的數(shù)據(jù)表，就以iphone為例：

以iphone6為例：
豎屏寬為375，叫做邏輯像素（有的地方叫獨(dú)立像素）；
豎屏寬的像素750，叫做物理像素，是設(shè)備實(shí)際的光點(diǎn)個(gè)數(shù)，要知道屏幕都是由一個(gè)一個(gè)光點(diǎn)組成的;
像素比（Asset）2x，就是2倍，物理像素/邏輯像素；
ppi:像素密度326,實(shí)際平方英寸的光點(diǎn)個(gè)數(shù)；值越高畫面越細(xì)膩，但對(duì)cpu和電池等硬件要求就越高;ppi超過(guò)163的屏幕蘋果公司起了個(gè)洋氣的名字，叫視網(wǎng)膜屏；

邏輯像素和物理像素的概念需要消化消化，css中的px對(duì)應(yīng)的實(shí)際上是邏輯像素，比如這里寫個(gè)width:375px,是可以鋪滿橫向的iphone6;

特別提醒，這里所有的有關(guān)像素的概念都和實(shí)際的尺寸（英寸）沒有多大關(guān)系。（比如iphone6的375就比一些android的360看上去還要窄一些。）

pc端沒有這么復(fù)雜的像素比關(guān)系，什么都是1:1:1；

搞明白這些像素的關(guān)系，問(wèn)題就來(lái)了，怎么在css中寫1個(gè)尺寸，就能讓所有尺寸和像素比的設(shè)備都飽和展示，比如上面說(shuō)的375px,屏幕橫過(guò)來(lái)是不是就只占手機(jī)一半的位置，換個(gè)320寬的手機(jī)是不是就溢出了，有滾動(dòng)條了；

認(rèn)識(shí)單位rem

簡(jiǎn)單介紹下rem和px的換算關(guān)系：1rem=html的font-size；
比如：html{font-size:100px},那么1rem就等于100px;

方案就出來(lái)了，所有單位使用rem,我們動(dòng)態(tài)改變html的font-size；

實(shí)施rem方案

思路就是(一遍看不清楚，把下面的例子理解了再看一遍思路)：先有一個(gè)基準(zhǔn)，比如375的iphone6，（為什么拿375說(shuō)事，上面已經(jīng)提到，我們寫的css樣式實(shí)際上只和邏輯像素有關(guān)，至于手機(jī)用幾個(gè)光點(diǎn)去渲染是它的事.）將html的font-size設(shè)置成容易計(jì)算的值比如100px，頁(yè)面初始化 和 尺寸發(fā)生變化 的時(shí)候獲取屏幕的寬度（document.body.clientWidth）就好了，然后用這個(gè)值除以375，獲得一個(gè)比值，去乘以100px,最后得到的值來(lái)替換html的font-size。

html的font-size=(屏幕寬/375)*100+"px";

例如iphone6,body:{width:3.75rem};
豎屏的時(shí)候:html{font-size:375/375}*100+"px",body寬就是3.75*(375/375)*100=375px，鋪滿了吧；
把屏幕橫過(guò)來(lái)：html{font-size:667/375}*100+"px",body寬3.75*(667/375)*100=667px,又鋪滿了吧；

實(shí)力總結(jié)

目前移動(dòng)端ui的設(shè)計(jì)稿都是按375的iphone6來(lái)設(shè)計(jì)的，大多是2倍圖，是為了展現(xiàn)更細(xì)節(jié)的東西，就是750px寬的psd圖，在前端設(shè)計(jì)適配方案的時(shí)候就可以用375對(duì)應(yīng)100px的方式來(lái)做，所有尺寸css寫psd上的一半就好；

rem的適配方案確定按以下幾個(gè)步驟實(shí)施：
1.確定設(shè)計(jì)稿尺寸，375倍數(shù)還是320倍數(shù)；
2.在公共js中添加方法:

var doc=document.docementElement;//減少dom操作
resize(){
    //獲取dom文檔寬
    var clientWidth=doc.clientWidth,
        htmlFontSize=doc.style.fontSize;
        //動(dòng)態(tài)改變html的font-size,以320為例
        if(clientWidth<320){//設(shè)置邊界值以防萬(wàn)一
            htmlFontSize=‘100px’;
        }else(){
            htmlFontSize=clientWidth/320*100+"px";
        }
}
//檢測(cè)屏幕尺寸變化同步font-size，如橫豎屏切換時(shí)觸發(fā)
window.onresize=function(){
    resize()
}；
//頁(yè)面初始化時(shí)觸發(fā)
resize()

3.css中所有的樣式單位為rem，包括文字的大小，換算關(guān)系如下：
如：設(shè)計(jì)稿尺寸為640，font-size為20px，那么所有尺寸除以2，
{width:3.2rem;font-size:0.1rem;}
如：設(shè)計(jì)稿尺寸為320，font-size為20px，那么body{width:3.2rem;font-size:0.2rem;}
如：設(shè)計(jì)搞為375,那么resize()方法中的320要換成375,css寫成body{width:3.75rem;font-size:0.2rem}

特別提醒：這樣的適配在pad橫屏展示超級(jí)大，所以還是要根據(jù)業(yè)務(wù)需求設(shè)置臨界值；
移動(dòng)端圖片適配除了rem的尺寸還要根據(jù)不同尺寸設(shè)備更換2倍圖和3倍圖，比如pad上展示3倍圖就會(huì)更清晰，一般方案是用media媒體查詢更換背景圖；

rem的缺陷
最近在做開發(fā)的時(shí)候遇到rem的一個(gè)大坑，就是如果用戶改變了手機(jī)的字體大小，而且我們的頁(yè)面樣式的寬用了rem,比如{width:1rem},那么頁(yè)面的寬就會(huì)成倍增長(zhǎng)，導(dǎo)致頁(yè)面亂掉。。。還沒找到辦法解決，寬度還是先避免使用rem的好。