移动端 rem 方案

postcss-pxtorem： PostCSS插件，用于从像素单元生成rem单元

一、安装 postcss-pxtorem

npm install postcss-pxtorem -D

二、引入使用

Vue

// build\vue-loader.conf.js
postcss: [
    require('postcss-pxtorem')({
      rootValue: 50,
      propList: ['*'],
      minPixelValue: 2
    })
]

React

// TODO

三、设置根节点 font-size

vue 中在 index.html 为不同宽度的手机设置根元素的fontSize值
react 中在 index.ejs 为不同宽度的手机设置根元素的fontSize值

<script>
(function(){
  var size = 100; // 规定 rem 与 px 之间值的转换
  var maxWidth = 750; // 设置基准宽度
  var ratio = function(){
    var clientWidth = document.documentElement.clientWidth || document.body.clientWidth || window.screen.width;
    var r = clientWidth / maxWidth;
    return r >= 1 ? 1 : r <= 0.234 ? 0.234 : r;
  };
  document.documentElement.style.fontSize = ratio() * size + 'px';
})()
</script>