淘寶、網易移動端 px 轉換 rem 原理，Vue-cli 實現 px 轉換 rem

   在過去的一段時間裏面一直在使用 Vue配合 lib-flexible和 px2rem-loader配合作移動端的網頁適配。秉着求知的思想，今天決定對他的原理進行分析。目前網上比較主流使用的就是淘寶方案和網易的解決方案，因此今天我就從這兩方面入手深度瞭解這兩個方案。 本着互聯網分享的精神我會將我所理解的內容分享給你們。Remember me. My name is '鉛筆畫不出的黑白'

   我在網上找到了一些資料你們也能夠去閱讀下 從網易與淘寶的font-size思考前端設計稿與工做流、移動web資源整理。可是在讀到單位換算時我有點蒙圈，下面我就講我本身的理解說給你們聽聽，也歡迎你們留言探討不一樣的解決方案。

網易轉換rem分析

   首先網易的設計稿是基於iPhone5設計的也就是寬度640px。（先不考慮dpr的問題下面會說）而後設置1rem等於100px（ HTML font-size爲100px），至關於6.4rem = 100%寬度 = 設備的寬度。

   因爲是基於6.4rem開發。iPhone5 的物理像素是320px（dpr是2.0），若是此時還想讓6.4rem等於設備寬度只能調整1rem對應font-size的比例， 320 / 6.4 = 50 讓1rem=50px就能夠實現。若是想讓 iPhone6 適配只須要 1rem = （375 / 6.4） = 58.59375px 就能夠實現iPhone6的適配，這個方法能夠適配市面上絕大多數的移動端設備。

   只須要加下面這句話能夠實現我上述效果。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
複製代碼

淘寶轉換rem分析

   此次我們仍是拿iPhone5（640px）的設計稿舉例，淘寶的思想是不管當前頁面多寬，讓10rem = 頁面寬度 = 100%，因此1rem = 64px 而後經過dpr設置縮放整個頁面，以達到高保真的效果。

  iPhone5的寬度是640px，頁面最終完成效果也是640px，iPhone的dpr是2，因此設置 <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> 就能夠了適配iPhone5了。固然這些東西lib-flexible都幫咱們作好了。我只不過說一下，讓好奇的小夥伴知道原理。

Vue-cli配合lib-flexible 實現移動端自適應佈局

cnpm intall lib-flexible  // 安裝lib-flexible
import 'lib-flexible'     // 在 src\main.js 中引入 lib-flexible
複製代碼

   完成上面代碼就至關於實現了rem動態計算了，若是此時在iPhone5上有一個元素是寬150px，高是200px，想計算rem寬是 150/64 = 2.34375rem，高是200/64 = 3.125rem。

   至於dpr的縮放問題,那個就不用關心了。lib-flexible已經幫你作好了。你只須要關心px轉換rem便可。

使用 px2rem-loader 自動將px轉換rem

cnpm intall px2rem-loader  // 安裝px2rem-loader
複製代碼

  在 build\utils.js 修改爲下面的代碼。

// 在 cssLoaders 方法內添加下列代碼 
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 64 //設計稿寬度/10
    }
  // 將 cssLoaders 方法內的generateLoaders的方法內的 loaders 變量添加 px2remLoader 
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader, lessLoader ] : [cssLoader, px2remLoader, lessLoader ]

複製代碼

後語：寫這篇文章已經計劃好久了，但是一直沒有時間寫。寫完後發現最近網上很流行vm配合rem佈局方案，而且淘寶也升級了佈局方案，改爲了定位方式的寫法。我近期深究下vm的解決方案。到時候分享一篇文章給你們。