移动端 rem方案

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

用法：

1. 安装 postcss-pxtorem 包 npm install postcss-pxtorem --save-dev

2. 引入const px2rem = require('postcss-pxtorem');

3. 使用 配置解析less文件，同时忽略不想转换为rem单位的less文件

const px2remOpts = {
   rootValue: 50,      //根元素的fontSize值 ，这里基于标准宽度为 375 的手机设置 即每一个 px 值除以 50 乘 rem
   propList: ['*'],    //匹配所有属性
   minPixelValue: 2    //设置要替换的最小像素值
}

image.png

新建postcss配置文件postcss.config.js，过滤掉不想转换rem的less文件，文件内容：

image.png

4. index.ejs中为为不同宽度的手机设置根元素的fontSize值

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