閱讀目錄

• 1. 問題的引出
• 2. 簡單問題簡單解決
• 3. 網(wǎng)易的做法
• 4. 淘寶的做法
• 5. 比較網(wǎng)易與淘寶的做法
• 6. 如何與設(shè)計(jì)協(xié)作
• 7. 總結(jié)

文/流云諸葛

本文結(jié)合自己對(duì)網(wǎng)易與淘寶移動(dòng)端首頁html元素上的font-size這個(gè)屬性的思考與學(xué)習(xí)，討論html5設(shè)計(jì)稿尺寸以及前端與設(shè)計(jì)之間協(xié)作流程的問題，內(nèi)容較多，但對(duì)你的技術(shù)和工作一定有價(jià)值，歡迎閱讀和點(diǎn)評(píng)。

1. 問題的引出

最近閱讀白樹的博文《移動(dòng)web資源整理》時(shí)，他在博文中有一段指出，如果html5要適應(yīng)各種分辨率的移動(dòng)設(shè)備，應(yīng)該使用rem這樣的尺寸單位，同時(shí)給出了一段針對(duì)各個(gè)分辨率范圍在html上設(shè)置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}}

在實(shí)際項(xiàng)目中，把與元素尺寸有關(guān)的css，如width,height,line-height,margin,padding等都以rem作為單位，這樣頁面在不同設(shè)備下就能保持一致的網(wǎng)頁布局。舉例來說，網(wǎng)頁有一個(gè).item類，設(shè)置了width為3.4rem，該類在不同分辨率下對(duì)應(yīng)的實(shí)際寬度如下：

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

以上代碼乍看沒啥問題，響應(yīng)式設(shè)計(jì)不就應(yīng)該是這么干的嗎？但是從工作量和復(fù)雜度方面來考慮，它有以下幾個(gè)不足：

• （1）.item類在所有設(shè)備下的width都是3.4rem，但在不同分辨率下的實(shí)際像素是不一樣的，所以在有些分辨率下，width的界面效果不一定合適，有可能太寬，有可能太窄，這時(shí)候就要對(duì)width進(jìn)行調(diào)整，那么就需要針對(duì).item寫媒介查詢的代碼，為該分辨率重新設(shè)計(jì)一個(gè)rem值。然而，這里有7種媒介查詢的情況，css又有很多跟尺寸相關(guān)的屬性，哪個(gè)屬性在哪個(gè)分辨率范圍不合適都是不定的，最后會(huì)導(dǎo)致要寫很多的媒介查詢才能適配所有設(shè)備，而且在寫的時(shí)候rem都得根據(jù)某個(gè)分辨率html的font-size去算，這個(gè)計(jì)算可不見得每次都那么容易，比如40px / 23.5px，這個(gè)rem值口算不出來吧！由此可見這其中的麻煩有多少。
• （2）以上代碼中給出的7個(gè)范圍下的font-size不一定是合適的，這7個(gè)范圍也不一定合適，實(shí)際有可能不需要這么多，所以找出這些個(gè)范圍，以及每個(gè)范圍最合適的font-size也很麻煩
• （3）設(shè)計(jì)稿都是以分辨率來標(biāo)明尺寸的，前端在根據(jù)設(shè)計(jì)稿里各個(gè)元素的像素尺寸轉(zhuǎn)換為rem時(shí)，該以哪個(gè)font-size為準(zhǔn)呢？這需要去寫才能知道。

正是因?yàn)橐陨咸岬降囊恍┎蛔?，我覺得這種適配方式不是特別好，寫起來太麻煩。為了完成工作，我們需要找尋更簡單更有效率的方法。那么html5該如何去做眾多移動(dòng)設(shè)備的適配呢？我目前已知的有3種解決方法，將會(huì)在下文的第2,3,4部分闡述，如果你閱讀之后，有什么想法，盡可在評(píng)論中與我交流。

2. 簡單問題簡單解決

我覺得有些web app并一定很復(fù)雜，比如拉勾網(wǎng)，你看看它的頁面在iPhone4,iphone6,ipad下的樣子就知道了：

它的頁面有一個(gè)特點(diǎn)，就是：

• 頂部與底部的bar不管分辨率怎么變，它的高度和位置都不變
• 中間每條招聘信息不管分辨率怎么變，招聘公司的圖標(biāo)等信息都位于條目的左邊，薪資都位于右邊

這種app是一種典型的彈性布局：關(guān)鍵元素高寬和位置都不變，只有容器元素在做伸縮變換。對(duì)于這類app，記住一個(gè)開發(fā)原則就好：文字流式，控件彈性，圖片等比縮放。以圖描述：

這個(gè)規(guī)則是一套基本的適配規(guī)則，對(duì)于這種簡單app來說已經(jīng)足夠，同時(shí)它也是后面要說的rem布局的基礎(chǔ)。另外對(duì)于拉勾這種app可能需要額外媒介查詢對(duì)布局進(jìn)行調(diào)整的就是小屏幕設(shè)備。舉例來說，因?yàn)楝F(xiàn)在很多設(shè)計(jì)稿是根據(jù)iphone6的尺寸來的，而iphon6設(shè)備寬的邏輯的像素是375px，而iphone4的邏輯像素是320個(gè)像素，所以如果你根據(jù)設(shè)計(jì)稿做出來的東西，在iphone4里面可能顯示不下，比如說拉鉤網(wǎng)底部那個(gè)下載框，你對(duì)比看下就知道了，這是4：

這是6：

6下面兩邊的間距比4多很多，說明拉勾對(duì)4肯定是做過適配的，從代碼也可以證實(shí)這一點(diǎn)：

不過如果你拿到的是根據(jù)4的設(shè)計(jì)稿，那就沒有問題，比4分辨率大的設(shè)備肯定能顯示根據(jù)4的尺寸做出來的東西。

還有一點(diǎn)，這種情況css尺寸單位用px就好，不要用rem，避免增加復(fù)雜度。