挪動端適配-rem:
熟習挪動端
做適配計劃之前先熟習下挪動端，熟習挪動端和pc端的區分和特性，才真正邃曉做適配的精華，這裏就簡樸引見下；
網上找不到主流android裝備的數據表，就以iphone為例：
以iphone6為例：
豎屏寬為375，叫做邏輯像素（有的處所叫自力像素）；
豎屏寬的像素750，叫做物理像素，是裝備現實的光點個數，要知道屏幕都是由一個一個光點構成的;
像素比（Asset）2x，就是2倍，物理像素/邏輯像素；
ppi:像素密度326,現實平方英寸的光點個數；值越高畫面越細緻，但對cpu和電池等硬件請求就越高;ppi凌駕163的屏幕蘋果公司起了個洋氣的名字，叫視網膜屏；
邏輯像素和物理像素的觀點須要消化消化，css中的px對應的現實上是邏輯像素，比方這裏寫個width:375px,是能夠鋪滿橫向的iphone6;
迥殊提示，這裏一切的有關像素的觀點都和現實的尺寸（英寸）沒有多大關聯。（比方iphone6的375就比一些android的360看上去還要窄一些。）
pc端沒有這麼龐雜的像素比關聯，什麼都是1:1:1；
搞邃曉這些像素的關聯，題目就來了，怎樣在css中寫1個尺寸，就能讓一切尺寸和像素比的裝備都飽和展示，比方上面說的375px,屏幕橫過來是否是就只佔手機一半的位置，換個320寬的手機是否是就溢出了，有滾動條了；
熟習單元rem
簡樸引見下rem和px的換算關聯：1rem=html的font-size；
比方：html{font-size:100px},那末1rem就即是100px;
計劃就出來了，一切單元運用rem,我們動態轉變html的font-size；
實行rem計劃
思緒就是(一遍看不清楚，把下面的例子邃曉了再看一遍思緒)：先有一個基準，比方375的iphone6，（為何拿375說事，上面已提到，我們寫的css款式現實上只和邏輯像素有關，至於手機用幾個光點去襯着是它的事.）將html的font-size設置成輕易盤算的值比方100px，頁面初始化 和 尺寸發生變化 的時刻獵取屏幕的寬度（document.body.clientWidth）就好了，然後用這個值除以375，取得一個比值，去乘以100px,末了獲得的值來替代html的font-size。
html的font-size=(屏幕寬/375)*100+’px’;
比方iphone6,body:{width:3.75rem};
豎屏的時刻:html{font-size:375/375}*100+'px',body寬就是3.75*(375/375)*100=375px，鋪滿了吧；
把屏幕橫過來：html{font-size:667/375}*100+'px',body寬3.75*(667/375)*100=667px,又鋪滿了吧；
氣力總結
現在挪動端ui的設想稿都是按375的iphone6來設想的，大多是2倍圖，是為了展示更細節的東西，就是750px寬的psd圖，在前端設想適配計劃的時刻就能夠用375對應100px的體式格局來做，一切尺寸css寫psd上的一半就好；
rem的適配計劃肯定按以下幾個步驟實行：
1.肯定設想稿尺寸，375倍數照樣320倍數；
2.在大眾js中增加要領:
var doc=document.docementElement;//削減dom操縱
resize(){
//獵取dom文檔寬
var clientWidth=doc.clientWidth,
htmlFontSize=doc.style.fontSize;
//動態轉變html的font-size,以320為例
if(clientWidth<320){//設置邊境值以防萬一
htmlFontSize=‘100px’;
}else(){
htmlFontSize=clientWidth/320*100+'px';
}
}
//檢測屏幕尺寸變化同步font-size，如反正屏切換時觸發
window.onresize=function(){
resize()
}；
//頁面初始化時觸發
resize()3.css中一切的款式單元為rem，包含筆墨的大小，換算關聯以下：
如：設想稿尺寸為640，font-size為20px，那末一切尺寸除以2，
{width:3.2rem;font-size:0.1rem;}
如：設想稿尺寸為320，font-size為20px，那末body{width:3.2rem;font-size:0.2rem;}
如：設想搞為375,那末resize()要領中的320要換成375,css寫成body{width:3.75rem;font-size:0.2rem}
迥殊提示：如許的適配在pad橫屏展示超等大，所以照樣要依據營業需求設置臨界值；
挪動端圖片適配除了rem的尺寸還要依據差別尺寸裝備替換2倍圖和3倍圖，比方pad上展示3倍圖就會更清楚，平常計劃是用media媒體查詢替換背景圖；
rem的缺點
近來在做開闢的時刻碰到rem的一個大坑，就是假如用戶轉變了手機的字體大小，而且我們的頁面款式的寬用了rem,比方{width:1rem},那末頁面的寬就會成倍增長，致使頁面亂掉。。。還沒找到方法處理，寬度照樣先防止運用rem的好。
