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

鉛筆畫不出的黑白發表於2018-06-22
REMVue

淘寶、網易移動端 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的解決方案。到時候分享一篇文章給大家。

相關文章