我在網上找到了一些資料大家也可以去閱讀下 從網易與淘寶的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">

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已經幫你做好了。你只需要關心dpr轉換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的解決方案。到時候分享一篇文章給大家。