媽媽不再用擔憂個人移動端了：網易和淘寶的rem方案剖析

　　從博主學習前端一路過來的經歷瞭解到，前端移動開發是大部分從PC端轉戰移動端的小夥伴都很是頭疼的一個問題，這邊博主就根據一篇本身看過的移動開發文章來剖析一下網易和淘寶的rem解決方案，但願可以幫助到一些從PC端轉戰web移動開發的小夥伴，由於是第一次寫博文，寫得很差的地方也但願你們多多包涵啦(*^__^*) 嘻嘻……（ps:文章有點長，若是你如今時間緊迫，那能夠先收藏，等到有時間了再回頭慢慢品嚐喔）

首先咱們一塊兒看看這篇打通博主web移動開發任督二脈的武功祕籍吧（如下內容到分割線前是引用前端大牛的文章，方便你們理解博主內容）：

從網易與淘寶的font-size思考前端設計稿與工做流

1. 簡單問題簡單解決

我以爲有些web app並必定很複雜，好比拉勾網，你看看它的頁面在iphone4,iphone6,ipad下的樣子就知道了：

它的頁面有一個特色，就是：

• 頂部與底部的bar無論分辨率怎麼變，它的高度和位置都不變
• 中間每條招聘信息無論分辨率怎麼變，招聘公司的圖標等信息都位於條目的左邊，薪資都位於右邊

這種app是一種典型的彈性佈局：關鍵元素高寬和位置都不變，只有容器元素在作伸縮變換。對於這類app，記住一個開發原則就好：文字流式，控件彈性，圖片等比縮放。以圖描述：

這個規則是一套基本的適配規則，對於這種簡單app來講已經足夠，同時它也是後面要說的rem佈局的基礎。另外對於拉勾這種app可能須要額外媒介查詢對佈局進行調整的就是小屏幕設備。舉例來講，由於如今不少設計稿是根據iphone6的尺寸來的，而iphon6設備寬的邏輯的像素是375px，而iphone4的邏輯像素是320個像素，因此若是你根據設計稿作出來的東西，在iphone4裏面可能顯示不下，好比說拉鉤網底部那個下載框，你對比看下就知道了，這是4：

這是6：

via6下面兩邊的間距比4多不少，說明拉勾對4確定是作過適配的，從代碼也能夠證明這一點：原文來自：http://caibaojian.com/mobile-responsive-example.html

不過若是你拿到的是根據4的設計稿，那就沒有問題，比4分辨率大的設備確定能顯示根據4的尺寸作出來的東西。

還有一點，這種狀況css尺寸單位用px就好，不要用rem，避免增長複雜度。

2. 網易的作法

先來看看網易在不一樣分辨率下，呈現的效果：

從上面幾張圖能夠看出，隨着分辨率的增大，頁面的效果會發生明顯變化，主要體如今各個元素的寬高與間距。375*680的比320*680的導航欄明顯要高。可以達到這種效果的根本緣由就是由於網易頁面裏除了font-size以外的其它css尺寸都使用了rem做爲單位，好比你看導航欄的高度設置代碼：

但是在本文第1部分提到，使用rem佈局結合在html上根據不一樣分辨率設置不一樣font-size有不少很差解決的麻煩，網易是如何解決的呢？最根本的緣由在於，網易頁面上html的font-size不是預先經過媒介查詢在css裏定義好的，而是經過JS計算出來的，因此當分辨率發生變化時，html的font-size就會變，不過這得在你調整分辨率後，刷新頁面才能看獲得效果。你看代碼就知道爲啥font-size是直接寫到html的style上面的了（js設置的緣由）：

它是根據什麼計算的，這就跟設計稿有關了，拿網易來講，它的設計稿應該是基於iphone4或者iphone5來的，因此它的設計稿豎直放時的橫向分辨率爲640px，爲了計算方便，取一個100px的font-size爲參照，那麼body元素的寬度就能夠設置爲width: 6.4rem，因而html的font-size=deviceWidth / 6.4。這個deviceWidth就是viewport設置中的那個deviceWidth。根據這個計算規則，可得出本部分開始的四張截圖中html的font-size大小以下：

deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

事實上網易就是這麼幹的，你看它的代碼就知道，body元素的寬是：

根據這個能夠確定它的設計稿豎着時的橫向分辨率爲640。而後你再看看網易在分辨率爲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怎麼來的，固然是根據設計稿的橫向分辨率/100得來的。下面總結下網易的這種作法：

• （1）先拿設計稿豎着的橫向分辨率除以100獲得body元素的寬度：

  若是設計稿基於iphone6，橫向分辨率爲750，body的width爲750 / 100 = 7.5rem
  若是設計稿基於iphone4/5，橫向分辨率爲640，body的width爲640 / 100 = 6.4rem

• （2）佈局時，設計圖標註的尺寸除以100獲得css中的尺寸，好比下圖：
• 播放器高度爲210px，寫樣式的時候css應該這麼寫：height: 2.1rem。之因此取一個100做爲參照，就是爲了這裏計算rem的方便！
• （3）在dom ready之後，經過如下代碼設置html的font-size:

  document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

• 6.4只是舉個例子，若是是750的設計稿，應該除以7.5。
• （4）font-size可能須要額外的媒介查詢，而且font-size不能使用rem，如網易的設置：
  @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個狀況要說明：

第一，若是採用網易這種作法，視口要以下設置：

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

第二，當deviceWidth大於設計稿的橫向分辨率時，html的font-size始終等於橫向分辨率/body元素寬：

640*680

641*680

之因此這麼幹，是由於當deviceWidth大於640時，則物理分辨率大於1280（這就看設備的devicePixelRatio這個值了），應該去訪問pc網站了。事實就是這樣，你從手機訪問網易，看到的是觸屏版的頁面，若是從pad訪問，看到的就是電腦版的頁面。若是你也想這麼幹，只要把總結中第三步的代碼稍微改一下就好了：

//code from http://caibaojian.com/mobile-responsive-example.html
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

3. 淘寶的作法

看看淘寶在不一樣分辨率下，呈現的效果：

淘寶的效果跟網易的效果實際上是相似的，隨着分辨率的變化，頁面元素的尺寸和間距都相應變化，這是由於淘寶的尺寸也是使用了rem的緣由。在介紹它的作法以前，先來了解一點關於viewport的知識，一般咱們採用以下代碼設置viewport:

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

這樣整個網頁在設備內顯示時的頁面寬度就會等於設備邏輯像素大小，也就是device-width。這個device-width的計算公式爲：

設備的物理分辨率/(devicePixelRatio * scale)，在scale爲1的狀況下，device-width = 設備的物理分辨率/devicePixelRatio 。

devicePixelRatio稱爲設備像素比，每款設備的devicePixelRatio都是已知，而且不變的，目前高清屏，廣泛都是2，不過還有更高的，好比2.5, 3 等，我魅族note的手機的devicePixelRatio就是3。淘寶觸屏版佈局的前提就是viewport的scale根據devicePixelRatio動態設置：

在devicePixelRatio爲2的時候，scale爲0.5

在devicePixelRatio爲3的時候，scale爲0.3333

這麼作目的固然是爲了保證頁面的大小與設計稿保持一致了，好比設計稿若是是750的橫向分辨率，那麼實際頁面的device-width，以iphone6來講，也等於750，這樣的話設計稿上標註的尺寸只要除以某一個值就可以轉換爲rem了。經過js設置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：

接下來要解決的問題是，元素的尺寸該如何計算，好比說設計稿上某一個元素的寬爲150px，換算成rem應該怎麼算呢？這個值等於設計稿標註尺寸/該設計稿對應的html的font-size。拿淘寶來講的，他們用的設計稿是750的，因此html的font-size就是75，若是某個元素時150px的寬，換算成rem就是150 / 75 = 2rem。總結下淘寶的這些作法：

• （1）動態設置viewport的scale

  var scale = 1 / devicePixelRatio;
  document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

• （2）動態計算html的font-size

  document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

• （3）佈局的時候，各元素的css尺寸=設計稿標註尺寸/設計稿橫向分辨率/10
• （4）font-size可能須要額外的媒介查詢，而且font-size不使用rem，這一點跟網易是同樣的。

最後還有一個狀況要說明，跟網易同樣，淘寶也設置了一個臨界點，當設備豎着時橫向物理分辨率大於1080時，html的font-size就不會變化了，緣由也是同樣的，分辨率已經能夠去訪問電腦版頁面了。

關於這種作法的具體實現，淘寶已經給咱們提供了一個開源的解決方案，具體請查看：

https://github.com/amfe/lib-flexible

以前沒有找到這相關的資料，實在很差意思：（

4. 比較網易與淘寶的作法

共同點：

• 都能適配全部的手機設備，對於pad，網易與淘寶都會跳轉到pc頁面，再也不使用觸屏版的頁面
• 都須要動態設置html的font-size
• 佈局時各元素的尺寸值都是根據設計稿標註的尺寸計算出來，因爲html的font-size是動態調整的，因此可以作到不一樣分辨率下頁面佈局呈現等比變化
• 容器元素的font-size都不用rem，須要額外地對font-size作媒介查詢
• 都能應用於尺寸不一樣的設計稿，只要按以上總結的方法去用就能夠了

不一樣點

• 淘寶的設計稿是基於750的橫向分辨率，網易的設計稿是基於640的橫向分辨率，還要強調的是，雖然設計稿不一樣，可是最終的結果是一致的，設計稿的尺寸一個公司設計人員的工做標準，每一個公司不同而已
• 淘寶還須要動態設置viewport的scale，網易不用
• 最重要的區別就是：網易的作法，rem值很好計算，淘寶的作法確定得用計算器才能用好了 。不過要是你使用了less和sass這樣的css處理器，就好辦多了，以淘寶跟less舉例，咱們能夠這樣編寫less：

//定義一個變量和一個mixin

@baseFontSize: 75;//基於視覺稿橫屏尺寸/100得出的基準font-size
.px2rem(@name, @px){
    @{name}: @px / @baseFontSize * 1rem;
}

//使用示例：

.container {
    .px2rem(height, 240);
}

//less翻譯結果：
.container {
    height: 3.2rem;
}

5. 如何與設計協做

前端與設計師的協做應該是比較簡單的，最重要的是要規範設計提供給你的產物，一般對於前端來講，咱們須要設計師提供標註尺寸後的設計稿以及各類元素的切圖文件，有了這些就能夠開始佈局了。考慮到Retina顯示屏以及這麼多移動設備分辨率卻不同的問題，那麼設計師應該提供多套設計稿嗎？從網易和淘寶的作法來看，應該是不用了，咱們能夠按照設計稿，先作出一套佈局，按照以上方法作適配，因爲是等比適配，因此各個設備的視覺效果差別應該會很小，固然也排除不了一些須要媒介查詢特殊處理的狀況，這確定避免不了的。下面這張圖是淘寶設計師分享的他們的工做流程：

解釋一下就是：

第一步，視覺設計階段，設計師按寬度750px（iphone 6）作設計稿，除圖片外全部設計元素用矢量路徑來作。設計定稿後在750px的設計稿上作標註，輸出標註圖。同時等比放大1.5倍生成寬度1125px的設計稿，在1125px的稿子裏切圖。

第二步，輸出兩個交付物給開發工程師：一個是程序用到的@3x切圖資源，另外一個是寬度750px的設計標註圖。

第三步，開發工程師拿到750px標註圖和@3x切圖資源，完成iPhone 6（375pt）的界面開發。此階段不能用固定寬度的方式開發界面，得用自動佈局（auto layout），方便後續適配到其它尺寸。

第四步，適配調試階段，基於iPhone 6的界面效果，分別向上向下調試iPhone 6 plus（414pt）和iPhone 5S及如下（320pt）的界面效果。由此完成大中小三屏適配。

注意第三步，就要使用咱們以上介紹的網易跟淘寶的適配方法了。假如公司設計稿不是基於750的怎麼辦，其實很簡單，按上圖作一些相應替換便可，可是流程和方法仍是同樣的。解釋一下爲何要在@3x的圖裏切，這是由於如今市面上也有很多像魅藍note這種超高清屏幕，devicePixelRatio已經達到3了，這個切圖保證在全部設備都清晰顯示。

 

以上是博主學習移動開發參考的一遍文章，博主分割線如下的總結也是基於以上這篇文章：

原文出處：原文飛機票

——————————————————————————————————我是華麗的分割線———————————————————————————————————

 

網易rem方案：

 

前提：

 

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

  

優點：

　　不用管DPR，只需知設計稿寬度

 

已知：

　　假設現有iPhone6設計稿，寬750px，其中一元素寬150px；

根據DPR值，iPhone6的DPR值爲2，咱們可得其中該元素的顯示尺寸：

真實顯示CSS值：

 

 

如今咱們用網易方案來解決這個問題：

　　首先咱們取1rem = 100px爲參考值（這個值能夠隨便取，爲什麼取這個值容後解答）

　　可知body的寬度：

 

　　又由於body的寬度爲7.5rem，由「網易公式」可得：

　　Html的font-size爲：

 

　　Dw爲deviceWidth，即設備寬度，這是整個方案裏惟一動態改變的值。

　　現咱們已知設計稿爲iPhone6，又知iPhone6的設備寬爲375px，

　　這時候咱們再回頭看：

　　html當前設備的font-size：

 

　　且：

 

　　可知，無形中這步已幫咱們做了DPR換算；750px的設計稿，顯示在375px的屏幕要怎樣轉換。

　　前面咱們取了1rem = 100px，可得該元素寬：150px = 1.5rem，

　　又知rem爲其餘元素相對根元素（html）的大小，

　　因此可得當前元素寬度的真實css顯示值爲：1.5rem*50px = 75px；（這裏的75px就跟咱們前面理想獲得的75px不謀而合了）。

　　這邊咱們把這個運算再拆解來看：

 

　　現再回頭看:就能夠知道爲何當時要取100px爲參考值，取這個值的意義就是爲了方便運算。

 

 

總結：

　　咱們只需以iPhone6的設計稿（當前主導的機型），750px寬完成一套頁面，當去到其餘設備時，由於咱們用的都是rem值，只須要經過JS動態得到當前的dw，再經過動態獲取的dw改變html的font-size值，頁面的其餘元素也會由於html的改變而進行等比例縮放。

 

 

步驟：

　　1.根據設計稿尺寸完成頁面；

　　2.設置meta，控制視口寬度，讓頁面以1:1比例渲染頁面

　　3.動態設置html的font-size；

　　4.把各元素的px值除以100轉換爲rem（字體除外）

 

網易方案關鍵代碼：

    設置視口：　

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

    動態設置html的font-size：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

 

——————————————————————————————————我是華麗的分割線———————————————————————————————————

淘寶rem方案：

(1)根據設計稿尺寸完成頁面切圖。

(2)經過JS得到當前設備的DPR值，而後動態設置meta的scale值。scale值爲縮放值，控制頁面的渲染比例。

　  假設當前設計稿寬爲750px的Ipone6設計稿，咱們也按照這個尺寸實現了頁面。若是當前打開頁面的設備爲Iphone6(如下簡稱IP6)，IP6的設備寬度爲375px，讓375px的視口寬度也實現750px的頁面確定是裝不下的(顯示不徹底，有滾動條)。

　  因此咱們須要動態設置meta的scale值，經過scale值改變當前的視口寬度。雖然當前的設備寬度仍然爲375px，可是咱們經過DPR值控制了當前的視口寬度爲：

    

　  這就至關於咱們把750px的頁面放到了750px的設備(經過改變scale值模擬出來的視口)中打開，而後透過375px的設備(當前打開頁面的設備)去觀看(注意：這裏是觀看，不是渲染。) 頁面。

(3)動態設置html的font-size：

　　　　「淘寶公式」：

　　　　　　　　　　　　 

　　　　假設當前打開的設備爲IP6：

　　　　　　　　　　　　

　　　　假設當前打開的設備爲IP5：

　　　　　　　　　　　　

(4)把各元素的設計稿尺寸從px轉換爲rem：

　　　　　　　　　　　　

　　　　假設當前以IP6爲設計稿實現的頁面，其中一元素的寬度爲150px，

　　　　根據以上分析可得，當前：

　　　　　　　　　　　　　　

　　　　把150px轉爲rem得：

　　　　　　　　　　　　　　　　

　　　　再假設當前打開頁面的設備爲IP5，可得：

　　　　　　　　　　　　　　　　

　　　　那麼150px的元素在當前頁面顯示的真實尺寸應該爲：

　　　　　　　　　　　　　　　　

　　　　又得：

　　　　　　　　　　　　　　　　

　　　　經過比例可知當前頁面在不一樣設備之間實現了等比例縮放，就算再放到其它的手機也同樣會根據動態算出的scale值實現等比例的縮放。

 

 

 

 

總結：

　　咱們只需以iPhone6的設計稿（當前主導的機型），750px寬完成一套頁面，經過JS獲取當前設備的DPR值並動態設置meta的scale值。當去到其餘設備時，由於咱們用的都是rem值，只須要通過JS動態得到當前的dw，再經過動態獲取的dw改變html的font-size值，頁面的其餘元素也會由於html的改變而進行等比例縮放。

 

淘寶方案關鍵代碼：

    動態設置viewport的scale：　

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

    以上實則只是在動態設置meta的scale

<meta name="viewport" content="initial-scale=scale,maximum-scale=scale, minimum-scale=scale">

    動態設置html的font-size：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

——————————————————————————————————我是華麗的分割線———————————————————————————————————

對比網易與淘寶的解決方案：

 

共同點：

　　　　  1.都是先根據設計稿，按設計稿原始尺寸完成整套頁面，而後採用rem轉換實現一稿解決全部適應。

　　　　2.都須要動態設置html的font-size屬性，但公式不一樣。

　　　　3.佈局時各元素的尺寸值都是根據設計稿標註的尺寸計算出來，因爲html的font-size是動態調整的，因此可以在不一樣的設備等比變化。

　　　　4.容器元素的font-size都不用rem，須要額外作font-size的媒體查詢。

 

不一樣點：

　　　　1.網易經過設置meta，控制視口寬度爲設備寬度，讓頁面以1:1比例渲染；

　　　　 淘寶經過動態設置meta的scale，把視口寬度控制爲設備的真實設計稿寬度。

　　　 2.運算公式不一樣：

　　　　　　　　　　　　html的font-size運算：

　　　　　　　　　　　　　　　　　　　　網易:；

 

　　　　　　　　　　　　　　　　　　　　淘寶：；

 

　　　　　　　　　　　　　  rem的轉換：

　　　　　　　　　　　　　　　　　　網易：把各元素按設計稿的px值除去100轉換爲rem；

　　　　　　　　　　　　　　　　　　淘寶：各元素rem=設計稿對應px值/html的font-size；

 

　　　　　3.解決思路不一樣：

　　　　　　　　　　　　網易：把750px的頁面等比例轉換，壓縮在375px的設備顯示；

　　　　　　　　　　　　淘寶：把750px的頁面放到虛擬的750px視口渲染打開，再透過375px的設備查看頁面。

 

備註：本案例分析統一以Iphone6爲設計原稿。

 

　　以上就是博主對於移動開發rem使用的一些我的淺見啦，但願能對你們有所幫助吧，說得很差的地方也勞煩各位大神不吝賜教o(╯□╰)o。

 

若是你不知道什麼是rem：請點擊飛機票;

若是你對於移動web徹底沒概念： 請點擊飛機票1  請點擊飛機票2