淘宝、网易移动端 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的解决方案。到时候分享一篇文章给你们。