本文轉(zhuǎn)載于啃先生捧灰，首發(fā)于微信公眾號（啃先生）
http://www.cnblogs.com/giveiris/p/5233585.html
壹 | Fisrt
移動端適配的是什么？
我們討論的是網(wǎng)頁適配多種尺寸屏幕善榛，讓網(wǎng)頁效果看起來和設計師的設計稿一樣。說白了就是同一套代碼在不同分辨率的手機上跑時石景，頁面元素間的間距隔心，留白，以及圖片大小會隨著變化屈芜，在比例上跟設計稿一致。
舉個粟子吧
圖1. ?260*400的屏幕
圖2. ?380*400的屏幕
上邊的頁面在不同大小屏幕上的展現(xiàn)朴译，咋一看沒什么問題井佑，一般的工程師會認為已經(jīng)OK了，所以前端工程師很容易忽略屏幕適配眠寿。但是對于一些精益求精的產(chǎn)品而言躬翁，這還達不到要求。例如有以下問題：
圖1的屏幕的尺寸較小盯拱，因此頭像應該小些盒发，話題左邊的空白也應該小一些。
圖片應該保持正方形狡逢，而且兩張圖之間的邊距應該隨屏幕變化而變化
明白了宁舰，所以padding，margin奢浑，圖片等的大小基本都要做適配
貳 | Second
那有什么方法可以做到這種適配蛮艰？
關鍵要找到一種長度單位，使得一樣的取值雀彼，在不同尺寸的屏幕上的大小按比例縮放壤蚜。
長度單位我只知道px??
我將在下一期的文章里推有關viewport和css像素px中的細節(jié)，這篇文章只關注如何適配详羡，所以先只談結(jié)論：
網(wǎng)頁在viewport中布局，viewport被分成一個個小方塊嘿悬，一個CSS像素占一個方塊
在設置了viewport寬度等于設備寬度的情況下实柠，通過某種算法，在不同大小的屏幕上善涨，1個CSS像素所占屏幕的物理尺寸是一樣大的
既然1個CSS像素在不同屏幕上物理尺寸一樣大窒盐，那px肯定不能做為適配的方法了
長度單位rem是相對于html標簽的font-size來計算的。例如html標簽設置font-size:36px钢拧，同時div設置width:1.2rem蟹漓。那么這個div的寬度就是1.2rem=36px*1.2=43.2px
如上面的例子，如果加載頁面的時候源内，使用JS根據(jù)屏幕的大小動態(tài)設置html標簽的font-size葡粒，隨著html標簽font-size的值變化，div的1.2rem換算成px的值 也跟著變化，即實現(xiàn)了div隨屏幕大小變化而變化嗽交，而CSS代碼始終是width:1.2rem卿嘲。以此類推到頁面所有的元素。
明白了夫壁，奧秘就在于結(jié)合px的固定尺寸和rem的相對尺寸拾枣！
叁 | Third
啃先生，原理我明白了盒让，你有沒有可執(zhí)行的具體方案??梅肤？
業(yè)內(nèi)比較流行的做法（參考阿里的flexible），有以下要點：
設置viewport為設備寬度（這里不一定邑茄，但目前先這樣足矣）
將viewport分成10rem姨蝴，并計算出1rem在當前瀏覽器的像素值，把它賦予html標簽的font-size（分成10rem只是為了方便計算而已）
寫CSS代碼時撩扒，遇到要適配的地方似扔，比如width，margin搓谆，padding等炒辉，就不要再用px了，改成用rem
JS和Html代碼如下：
CSS代碼做了類似如下的修改：
運行結(jié)果如下：邊距和頭像圖片都隨屏幕變化而變化了
肆 | Fourth
代碼量很少泉手，就是要理解消化黔寇。有一個問題，設計師給的設計稿尺寸單位都是用px斩萌，但是剛剛說的第3步缝裤，寫CSS的時候要用rem，這個怎么換算颊郎？會很麻煩
現(xiàn)有設計師提供寬度為400px的設計稿憋飞，其中某個圖片的寬度設計為20px，那么姆吭，CSS的寫法就是img{width: 0.05rem;}榛做，怎么得出這個結(jié)果的呢？
設計稿的寬度視同手機寬度内狸，即假設有一個viewport為400px的手機
將它分成10rem检眯，每個rem為40px;
那么圖片寬度20px自然就是0.5rem;
且慢，豈不是意味著昆淡，每次寫到尺寸的地方锰瘸，我都要先在草稿紙上把設計師給的px換算成rem？別急昂灵，sublime text 3有一款插件可以幫助你進行這個換算避凝，你只需要輸入20px舞萄，它會自動幫你換算成 0.5rem，看以下圖就秒懂了
參考
使用Flexible實現(xiàn)手淘H5頁面的終端適配（https://github.com/amfe/article/issues/17）
移動端高清恕曲、多屏適配方案（http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041）
A tale of two viewports（http://www.quirksmode.org/mobile/viewports.html）
最后貼一下那個自動轉(zhuǎn)換單位的插件地址 https://github.com/flashlizi/cssrem
