Vue在移动端基于rem适配实现思路及过程

本文主要描写，移动端的rem适配方案适配方案。

1.rem适配方案，我们首先需要设置根元素，一般情况下，font-size为16，37.5，75，但是我们不能写死这些数据，因为不同设备需要设置不同的根元素，通常我们会请出这么一个常用插件。 flexible.js，这个代码的源码也很简单。
简单看一下

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

简单来说，获取视口宽度，监听屏幕，当屏幕变化的时候，触发函数，设置根元素的font-size为屏幕宽度/一个具体的值，在这里它除了10，意味着，如果设计稿375的宽，根font-size就是37.5px，这个是符合vant这个组件库的一个做法的。 另外我们还搭配postcss-pxtorem。
postcss-pxtorem这个插件呢，主要是提供了px转换成rem的能力，其实我司用的一般是codesign，他其实在设计稿上就可以直接转换的，这个东西呢，也不是没有用呢，它可以给vant用呀，因为vant它的单位是px。
那其实很简单啦~

1.下载上述的js文件放到项目中，然后引入一下就可以
2.下载这个postcss-pxtorem
npm install postcss postcss-pxtorem --save-dev
3.在根目录创建postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

rootvalue的值是有说法的，因为vant就是根据37.5来设计的，这样写意味着什么，1rem＝37.5px，比如vant的某个字体的大小是20px，它就会变成20/37.5 = .0.53333rem，如果你设置成16，通过这个插件转换就是20/16 = 1.25rem，这个是不一样，然后rem跟什么有关呢?对呀，上面提到的根的font-size。此时根元素大小如果是37.5px，那么换成px就是0.533337.5=20；另一个同理计算 161.25 = 20px，其实都是一样的。所以找出规律了嘛？

重点！
——————————

根的大小基础设置值就是rootValue的设置值，因为codesign支持自定义rem基准。所以如果这里写定义成16，那么rootValue也要写16，但是，fontsize我们不是用那个插件 屏幕宽度/10得出fontsize嘛 那样肯定不行，所以要么除23.4375 那样算出来是16px。

但是还有一个好主意哦~~
那就是我们设置根font-size为 4.26666667vw ，这样写如果设计稿是375的话，其实也是16px，这样做的好处啊~ ，就是通过css自己计算fontsize，也是很方便的呢。

ok其实这就完成了基本的移动端适配~~

如有不足，敬请指出