1. 問題的引出
若是html5要適應各類分辨率的移動設備，應該使用rem這樣的尺寸單位，同時給出了一段針對各個分辨率範圍在html上設置font-size的代碼：css
html{font-size:10px}html
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}前端
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}html5
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}git
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}github
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}web
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}app
@media screen and (min-width:800px){html{font-size:25px}}iphone
在實際項目中，把與元素尺寸有關的css，如width,height,line-height,margin,padding等都以rem做爲單位，這樣頁面在不一樣設備下就能保持一致的網頁佈局。舉例來講，網頁有一個.item類，設置了width爲3.4rem，該類在不一樣分辨率下對應的實際寬度以下：佈局
321px <= device-width <= 375px，font-size:11px ---> .item的width：34px
376px <= device-width <= 414px，font-size:12px ---> .item的width：37.4px
415px <= device-width <= 639px，font-size:15px ---> .item的width：40.8px
640px <= device-width <= 719px，font-size:20px ---> .item的width：51px
720px <= device-width <= 749px，font-size:22.5px ---> .item的width：76.5px
750px <= device-width <= 799px，font-size:23.5px ---> .item的width：79.8999999px
800px <= device-width ，font-size:25px ---> .item的width：85px
以上代碼乍看沒啥問題，響應式設計不就應該是這麼幹的嗎？可是從工做量和複雜度方面來考慮，它有如下幾個不足：
（1）.item類在全部設備下的width都是3.4rem，但在不一樣分辨率下的實際像素是不同的，因此在有些分辨率下，width的界面效果不必定合適，有可能太寬，有可能太窄，這時候就要對width進行調整，那麼就須要針對.item寫媒介查詢的代碼，爲該分辨率從新設計一個rem值。然而，這裏有7種媒介查詢的狀況，css又有不少跟尺寸相關的屬性，哪一個屬性在哪一個分辨率範圍不合適都是不定的，最後會致使要寫不少的媒介查詢才能適配全部設備，並且在寫的時候rem都得根據某個分辨率html的font-size去算，這個計算可不見得每次都那麼容易，好比40px / 23.5px，這個rem值口算不出來吧！因而可知這其中的麻煩有多少。
（2）以上代碼中給出的7個範圍下的font-size不必定是合適的，這7個範圍也不必定合適，實際有可能不須要這麼多，因此找出這些個範圍，以及每一個範圍最合適的font-size也很麻煩
（3）設計稿都是以分辨率來標明尺寸的，前端在根據設計稿裏各個元素的像素尺寸轉換爲rem時，該以哪一個font-size爲準呢？這須要去寫才能知道。
正是由於以上提到的一些不足，我以爲這種適配方式不是特別好，寫起來太麻煩。爲了完成工做，咱們須要找尋更簡單更有效率的方法。那麼html5該如何去作衆多移動設備的適配呢？我目前已知的有3種解決方法，將會在下文的第2,3,4部分闡述，若是你閱讀以後，有什麼想法，儘可在評論中與我交流。
2. 簡單問題簡單解決
我以爲有些web app並必定很複雜，好比拉勾網，你看看它的頁面在iphone4,iphone6,ipad下的樣子就知道了：
它的頁面有一個特色，就是：
頂部與底部的bar無論分辨率怎麼變，它的高度和位置都不變
中間每條招聘信息無論分辨率怎麼變，招聘公司的圖標等信息都位於條目的左邊，薪資都位於右邊
這種app是一種典型的彈性佈局：關鍵元素高寬和位置都不變，只有容器元素在作伸縮變換。對於這類app，記住一個開發原則就好：文字流式，控件彈性，圖片等比縮放。以圖描述：
這個規則是一套基本的適配規則，對於這種簡單app來講已經足夠，同時它也是後面要說的rem佈局的基礎。另外對於拉勾這種app可能須要額外媒介查詢對佈局進行調整的就是小屏幕設備。舉例來講，由於如今不少設計稿是根據iphone6的尺寸來的，而iphon6設備寬的邏輯的像素是375px，而iphone4的邏輯像素是320個像素，因此若是你根據設計稿作出來的東西，在iphone4裏面可能顯示不下，好比說拉鉤網底部那個下載框，你對比看下就知道了，這是4：
這是6:
6下面兩邊的間距比4多不少，說明拉勾對4確定是作過適配的，從代碼也能夠證明這一點：
不過若是你拿到的是根據4的設計稿，那就沒有問題，比4分辨率大的設備確定能顯示根據4的尺寸作出來的東西。
還有一點，這種狀況css尺寸單位用px就好，不要用rem，避免增長複雜度。
3. 淘寶的作法
動態計算html的font-size
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
關於這種作法的具體實現，淘寶已經給咱們提供了一個開源的解決方案，具體請查看：
https://github.com/amfe/lib-flexible
4. 總結
總算是羅裏吧嗦地把文章寫完了， 但願你還以爲滿意，這篇文章對我來講價值也很大，從此作html5的項目就有思路了。最後，歡迎你們在評論裏與我交流你對本文的見解，咱們能夠一塊兒交流，一塊兒進步。