移动端使用rem来自适应各种屏幕大小

1、安装postcss-pxtorem插件，你写的代码只需要按照设计图来写px，他会自动帮你转换成rem单位，就实现屏幕适配了。

npm install postcss-pxtorem --save-dev

2、创建一个rem.js的文件，
复制以下代码进去：

// 设置 rem 函数
function setRem () {
  // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
  const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  //得到html的Dom元素
  const htmlDom = document.getElementsByTagName('html')[0];
  //设置根元素字体大小
  htmlDom.style.fontSize= htmlWidth/23.4375 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem();
};

然后在main.js引入这个文件，比如：import ‘./util/rem.js’;

3、如果是vue项目，打开根目录下的.postcssrc.js,
新增postcss-pxtorem的代码：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": { // 此处为添加部分!!!!!!!!
      rootValue: 16, // 对应16px 适配移动端375px宽度
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
}

4、完成，你只需要在项目css文件中写px单位即可，在浏览器跑的时候他会帮你自动转成rem单位。