閱讀目錄

• 1. 問題的引出
• 2. 簡單問題簡單解決
• 3. 網易的做法
• 4. 淘寶的做法
• 5. 比較網易與淘寶的做法
• 6. 如何與設計協作
• 7. 總結

文/流云諸葛

本文結合自己對網易與淘寶移動端首頁html元素上的font-size這個屬性的思考與學習，討論html5設計稿尺寸以及前端與設計之間協作流程的問題，內容較多，但對你的技術和工作一定有價值，歡迎閱讀和點評。

1. 問題的引出

最近閱讀白樹的博文《移動web資源整理》時，他在博文中有一段指出，如果html5要適應各種分辨率的移動設備，應該使用rem這樣的尺寸單位，同時給出了一段針對各個分辨率范圍在html上設置font-size的代碼：

html{font-size:10px}

@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}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

在實際項目中，把與元素尺寸有關的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，避免增加復雜度。