閱讀目錄
文/流云諸葛
本文結(jié)合自己對網(wǎng)易與淘寶移動端首頁html元素上的font-size這個屬性的思考與學(xué)習，討論html5設(shè)計稿尺寸以及前端與設(shè)計之間協(xié)作流程的問題，內(nèi)容較多，但對你的技術(shù)和工作一定有價值，歡迎閱讀和點評。
1. 問題的引出
最近閱讀白樹的博文《移動web資源整理》時，他在博文中有一段指出，如果html5要適應(yīng)各種分辨率的移動設(shè)備，應(yīng)該使用rem這樣的尺寸單位，同時給出了一段針對各個分辨率范圍在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}}在實際項目中，把與元素尺寸有關(guān)的css，如width,height,line-height,margin,padding等都以rem作為單位，這樣頁面在不同設(shè)備下就能保持一致的網(wǎng)頁布局。舉例來說，網(wǎng)頁有一個.item類，設(shè)置了width為3.4rem，該類在不同分辨率下對應(yīng)的實際寬度如下：
321px <= device-width <= 375px，font-size:11px ---> .item的width：34px376px <= device-width <= 414px，font-size:12px ---> .item的width：37.4px415px <= device-width <= 639px，font-size:15px ---> .item的width：40.8px640px <= device-width <= 719px，font-size:20px ---> .item的width：51px720px <= device-width <= 749px，font-size:22.5px ---> .item的width：76.5px750px <= device-width <= 799px，font-size:23.5px ---> .item的width：79.8999999px800px <= device-width ，font-size:25px ---> .item的width：85px
以上代碼乍看沒啥問題，響應(yīng)式設(shè)計不就應(yīng)該是這么干的嗎？但是從工作量和復(fù)雜度方面來考慮，它有以下幾個不足：
正是因為以上提到的一些不足，我覺得這種適配方式不是特別好，寫起來太麻煩。為了完成工作，我們需要找尋更簡單更有效率的方法。那么html5該如何去做眾多移動設(shè)備的適配呢？我目前已知的有3種解決方法，將會在下文的第2,3,4部分闡述，如果你閱讀之后，有什么想法，盡可在評論中與我交流。
2. 簡單問題簡單解決
我覺得有些web app并一定很復(fù)雜，比如拉勾網(wǎng)，你看看它的頁面在iphone4,iphone6,ipad下的樣子就知道了：
它的頁面有一個特點，就是：
這種app是一種典型的彈性布局：關(guān)鍵元素高寬和位置都不變，只有容器元素在做伸縮變換。對于這類app，記住一個開發(fā)原則就好：文字流式，控件彈性，圖片等比縮放。以圖描述：
這個規(guī)則是一套基本的適配規(guī)則，對于這種簡單app來說已經(jīng)足夠，同時它也是后面要說的rem布局的基礎(chǔ)。另外對于拉勾這種app可能需要額外媒介查詢對布局進行調(diào)整的就是小屏幕設(shè)備。舉例來說，因為現(xiàn)在很多設(shè)計稿是根據(jù)iphone6的尺寸來的，而iphon6設(shè)備寬的邏輯的像素是375px，而iphone4的邏輯像素是320個像素，所以如果你根據(jù)設(shè)計稿做出來的東西，在iphone4里面可能顯示不下，比如說拉鉤網(wǎng)底部那個下載框，你對比看下就知道了，這是4：
這是6：
6下面兩邊的間距比4多很多，說明拉勾對4肯定是做過適配的，從代碼也可以證實這一點：
不過如果你拿到的是根據(jù)4的設(shè)計稿，那就沒有問題，比4分辨率大的設(shè)備肯定能顯示根據(jù)4的尺寸做出來的東西。
還有一點，這種情況css尺寸單位用px就好，不要用rem，避免增加復(fù)雜度。
注：相關(guān)網(wǎng)站建設(shè)技巧閱讀請移步到建站教程頻道。
3. 網(wǎng)易的做法
先來看看網(wǎng)易在不同分辨率下，呈現(xiàn)的效果：
從上面幾張圖可以看出，隨著分辨率的增大，頁面的效果會發(fā)生明顯變化，主要體現(xiàn)在各個元素的寬高與間距。375*680的比320*680的導(dǎo)航欄明顯要高。能夠達到這種效果的根本原因就是因為網(wǎng)易頁面里除了font-size之外的其它css尺寸都使用了rem作為單位，比如你看導(dǎo)航欄的高度設(shè)置代碼：
可是在本文第1部分提到，使用rem布局結(jié)合在html上根據(jù)不同分辨率設(shè)置不同font-size有很多不好解決的麻煩，網(wǎng)易是如何解決的呢？最根本的原因在于，網(wǎng)易頁面上html的font-size不是預(yù)先通過媒介查詢在css里定義好的，而是通過js計算出來的，所以當分辨率發(fā)生變化時，html的font-size就會變，不過這得在你調(diào)整分辨率后，刷新頁面才能看得到效果。你看代碼就知道為啥font-size是直接寫到html的style上面的了（js設(shè)置的原因）：
它是根據(jù)什么計算的，這就跟設(shè)計稿有關(guān)了，拿網(wǎng)易來說，它的設(shè)計稿應(yīng)該是基于iphone4或者iphone5來的，所以它的設(shè)計稿豎直放時的橫向分辨率為640px，為了計算方便，取一個100px的font-size為參照，那么body元素的寬度就可以設(shè)置為width: 6.4rem，于是html的font-size=deviceWidth / 6.4。這個deviceWidth就是viewport設(shè)置中的那個deviceWidth。根據(jù)這個計算規(guī)則，可得出本部分開始的四張截圖中html的font-size大小如下：
deviceWidth = 320，font-size = 320 / 6.4 = 50pxdeviceWidth = 375，font-size = 375 / 6.4 = 58.59375pxdeviceWidth = 414，font-size = 414 / 6.4 = 64.6875pxdeviceWidth = 500，font-size = 500 / 6.4 = 78.125px
事實上網(wǎng)易就是這么干的，你看它的代碼就知道，body元素的寬是：
根據(jù)這個可以肯定它的設(shè)計稿豎著時的橫向分辨率為640。然后你再看看網(wǎng)易在分辨率為320*680，375*680，414*680，500*680時，html的font-size是不是與上面計算的一致：
320*680
375*680
414*680
500*680
這個deviceWidth通過document.documentElement.clientWidth就能取到了，所以當頁面的dom ready后，做的第一件事情就是：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
這個6.4怎么來的，當然是根據(jù)設(shè)計稿的橫向分辨率/100得來的。下面總結(jié)下網(wǎng)易的這種做法：
如果設(shè)計稿基于iphone6，橫向分辨率為750，body的width為750 / 100 = 7.5rem如果設(shè)計稿基于iphone4/5，橫向分辨率為640，body的width為640 / 100 = 6.4rem
播放器高度為210px，寫樣式的時候css應(yīng)該這么寫：height: 2.1rem。之所以取一個100作為參照，就是為了這里計算rem的方便！ （3）在dom ready以后，通過以下代碼設(shè)置html的font-size:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
6.4只是舉個例子，如果是750的設(shè)計稿，應(yīng)該除以7.5。 （4）font-size可能需要額外的媒介查詢，并且font-size不能使用rem，如網(wǎng)易的設(shè)置：
@media screen and (max-width:321px){ .m-navlist{font-size:15px}}@media screen and (min-width:321px) and (max-width:400px){ .m-navlist{font-size:16px}}@media screen and (min-width:400px){ .m-navlist{font-size:18px}}最后還有2個情況要說明：
第一，如果采用網(wǎng)易這種做法，視口要如下設(shè)置：
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
第二，當deviceWidth大于設(shè)計稿的橫向分辨率時，html的font-size始終等于橫向分辨率/body元素寬：
640*680
641*680
之所以這么干，是因為當deviceWidth大于640時，則物理分辨率大于1280（這就看設(shè)備的devicePixelRatio這個值了），應(yīng)該去訪問pc網(wǎng)站了。事實就是這樣，你從手機訪問網(wǎng)易，看到的是觸屏版的頁面，如果從pad訪問，看到的就是電腦版的頁面。如果你也想這么干，只要把總結(jié)中第三步的代碼稍微改一下就行了：
var deviceWidth = document.documentElement.clientWidth;if(deviceWidth > 640) deviceWidth = 640;document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
4. 淘寶的做法
看看淘寶在不同分辨率下，呈現(xiàn)的效果：
淘寶的效果跟網(wǎng)易的效果其實是類似的，隨著分辨率的變化，頁面元素的尺寸和間距都相應(yīng)變化，這是因為淘寶的尺寸也是使用了rem的原因。在介紹它的做法之前，先來了解一點關(guān)于viewport的知識，通常我們采用如下代碼設(shè)置viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
這樣整個網(wǎng)頁在設(shè)備內(nèi)顯示時的頁面寬度就會等于設(shè)備邏輯像素大小，也就是device-width。這個device-width的計算公式為：
設(shè)備的物理分辨率/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 設(shè)備的物理分辨率/devicePixelRatio 。
devicePixelRatio稱為設(shè)備像素比，每款設(shè)備的devicePixelRatio都是已知，并且不變的，目前高清屏，普遍都是2，不過還有更高的，比如2.5, 3 等，我魅族note的手機的devicePixelRatio就是3。淘寶觸屏版布局的前提就是viewport的scale根據(jù)devicePixelRatio動態(tài)設(shè)置：
在devicePixelRatio為2的時候，scale為0.5
在devicePixelRatio為3的時候，scale為0.3333
這么做目的當然是為了保證頁面的大小與設(shè)計稿保持一致了，比如設(shè)計稿如果是750的橫向分辨率，那么實際頁面的device-width，以iphone6來說，也等于750，這樣的話設(shè)計稿上標注的尺寸只要除以某一個值就能夠轉(zhuǎn)換為rem了。通過js設(shè)置viewport的方法如下：
var scale = 1 / devicePixelRatio;document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');淘寶布局的第二個要點，就是html元素的font-size的計算公式，font-size = deviceWidth / 10：
接下來要解決的問題是，元素的尺寸該如何計算，比如說設(shè)計稿上某一個元素的寬為150px，換算成rem應(yīng)該怎么算呢？這個值等于設(shè)計稿標注尺寸/該設(shè)計稿對應(yīng)的html的font-size。拿淘寶來說的，他們用的設(shè)計稿是750的，所以html的font-size就是75，如果某個元素時150px的寬，換算成rem就是150 / 75 = 2rem。總結(jié)下淘寶的這些做法：
var scale = 1 / devicePixelRatio;document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
最后還有一個情況要說明，跟網(wǎng)易一樣，淘寶也設(shè)置了一個臨界點，當設(shè)備豎著時橫向物理分辨率大于1080時，html的font-size就不會變化了，原因也是一樣的，分辨率已經(jīng)可以去訪問電腦版頁面了。
共同點：
不同點
6. 如何與設(shè)計協(xié)作
前端與設(shè)計師的協(xié)作應(yīng)該是比較簡單的，最重要的是要規(guī)范設(shè)計提供給你的產(chǎn)物，通常對于前端來說，我們需要設(shè)計師提供標注尺寸后的設(shè)計稿以及各種元素的切圖文件，有了這些就可以開始布局了?？紤]到Retina顯示屏以及這么多移動設(shè)備分辨率卻不一樣的問題，那么設(shè)計師應(yīng)該提供多套設(shè)計稿嗎？從網(wǎng)易和淘寶的做法來看，應(yīng)該是不用了，我們可以按照設(shè)計稿，先做出一套布局，按照以上方法做適配，由于是等比適配，所以各個設(shè)備的視覺效果差異應(yīng)該會很小，當然也排除不了一些需要媒介查詢特殊處理的情況，這肯定避免不了的。下面這張圖是淘寶設(shè)計師分享的他們的工作流程：
解釋一下就是：
第一步，視覺設(shè)計階段，設(shè)計師按寬度750px（iPhone 6）做設(shè)計稿，除圖片外所有設(shè)計元素用矢量路徑來做。設(shè)計定稿后在750px的設(shè)計稿上做標注，輸出標注圖。同時等比放大1.5倍生成寬度1125px的設(shè)計稿，在1125px的稿子里切圖。
第二步，輸出兩個交付物給開發(fā)工程師：一個是程序用到的@3x切圖資源，另一個是寬度750px的設(shè)計標注圖。
第三步，開發(fā)工程師拿到750px標注圖和@3x切圖資源，完成iPhone 6（375pt）的界面開發(fā)。此階段不能用固定寬度的方式開發(fā)界面，得用自動布局（auto layout），方便后續(xù)適配到其它尺寸。
第四步，適配調(diào)試階段，基于iPhone 6的界面效果，分別向上向下調(diào)試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏適配。
注意第三步，就要使用我們以上介紹的網(wǎng)易跟淘寶的適配方法了。假如公司設(shè)計稿不是基于750的怎么辦，其實很簡單，按上圖做一些相應(yīng)替換即可，但是流程和方法還是一樣的。解釋一下為什么要在@3x的圖里切，這是因為現(xiàn)在市面上也有不少像魅藍note這種超高清屏幕，devicePixelRatio已經(jīng)達到3了，這個切圖保證在所有設(shè)備都清晰顯示。
7. 總結(jié)
總算是羅里吧嗦地把文章寫完了， 希望你還覺得滿意，這篇文章對我來說價值也很大，今后做html5的項目就有思路了，本文提到的三種方法將來肯定都有用武之地。最后，歡迎大家在評論里與我交流你對本文的看法，我們可以一起交流，一起進步。
聯(lián)系客服
