rem适配移动端

一、普通html网页项目使用rem

新建文件rem.js或者直接在index.html中写在script标签里面

window.onload = function () {
  /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
    为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
  getRem(750, 100);
};
window.onresize = function () {
  getRem(750, 100);
};
function getRem(pwidth, prem) {
  var html = document.querySelector("html");
  var oWidth =
    document.body.clientWidth || document.documentElement.clientWidth;
  if (oWidth < 750) {
    html.style.fontSize = (oWidth / pwidth) * prem + "px";
  }
}
window.onload();

二、在vue项目中使用rem布局

vue版本：2.6.14

vue-cli版本:5.0.0

1.安装依赖

npm install postcss-pxtorem --save-dev
npm install --save lib-flexible   

如果报PostCSS plugin postcss-pxtorem requires PostCSS 8错误的时候， 意思是版本太高了，先卸载原来的版本， 然后下载指定版本

npm uninstall postcss-pxtorem

npm i postcss-pxtorem@5.1.1

2.在根目录下新建postcss.config.js：

module.exports = {
    plugins: {
      autoprefixer: {
        overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
      },
      'postcss-pxtorem': {
        rootValue: 37.5,//设计稿/10
        propList: ['*'],
      },
    },
};

3.在main.js中引入

import 'lib-flexible/flexible.js'