本文背景：響應(yīng)式布局的實現(xiàn)依靠媒體查詢（ Media Queries ）來實現(xiàn)，選取主流設(shè)備寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，只能在選取的幾個主流設(shè)備尺寸下呈現(xiàn)完美適配。
專題導(dǎo)入：我們可以通過rem單位來進行適配，然后內(nèi)嵌一段js腳本去動態(tài)計算根元素大小。
px：絕對單位像素
rem：相對于“根元素的字體大小”的單位
一、解釋網(wǎng)頁設(shè)計中經(jīng)常看到的 body{ font-size:62.5%}
由于絕大多數(shù)瀏覽器中的默認font-size：16px; 進而默認情況下1rem = 16px。那1.2rem = ?(......經(jīng)過幾十秒的心算，罷了，我還是拿起計算器吧。)最后算出來1.2rem = 19.2px。
經(jīng)過上面的過程，心想，如果默認情況下1rem = 10px,那1.2rem = 12px(再也不用拿起計算器了，哦也)。而font-size:62.5%的由來就是10/16的值，這句css的目的就是把瀏覽器默認的根元素字體大小置為10px，方便rem和px的轉(zhuǎn)換。
由上可知：我們可以在自己的css代碼中，為html{font-size:10px} body{font-size:100%},這樣在做頁面自適應(yīng)時，rem的計算轉(zhuǎn)換就簡單多了。
二、js動態(tài)設(shè)置rem來實現(xiàn)移動端的自適應(yīng)
原理：利用Js獲取設(shè)備屏幕的寬度，并根據(jù)屏幕的寬度動態(tài)改變根元素html的font-siz屬性的作用
代碼截屏：
注：對于iphone6而言，屏幕尺寸為750px，一般設(shè)計人員的設(shè)計稿也大都是以iphone6的屏幕尺寸設(shè)計，iphone6為基準做設(shè)備適配。
三、移動開發(fā)設(shè)計稿轉(zhuǎn)換成頁面尺寸的問題
（1）設(shè)計稿的單位是px，一般是750px
（2）頁面若使用rem為單位，一般把轉(zhuǎn)換設(shè)置為1rem = 10px（參考本文第一（“解釋網(wǎng)頁設(shè)計中經(jīng)常看到的 body{ font-size:62.5%}”）部分）。
（3）750px的設(shè)計圖一375px量寬（即，設(shè)計稿是750px，轉(zhuǎn)換成頁面實際尺寸就是375px，頁面尺寸是設(shè)計稿尺寸的二分之一）。例：若設(shè)計稿里面元素的寬度是100px，則頁面尺寸就是 100/2/10 = 5rem
四、移動開發(fā)注意點
（1）一定要加上的meta設(shè)置：
<meta name = "viewport" conent = "width = device-width; initial-scale = 1.0; minimum-scale = 1.0; maximum-scale = 1.0; user-scalable = no">
