vue3.0中使用postcss-pxtorem,实现h5移动端页面自适应

1.安装依赖

npm install postcss-pxtorem -D

2.设置规则（更改postcss.config.js,如没有该文件，根目录手动创建）

  module.exports = {
      plugins: {
          'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 7']
          },
        'postcss-pxtorem': {
            rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
            propList: ['*']
         }
    }
  }

如果出现报错，注释掉下面这段

3.src目录下，新建 libs/rem.js 输入如下代码

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

注意：根元素字体大小=实际屏幕宽度/(一倍图设计稿屏幕宽度/16)

在main.js中引入rem.js

import './libs/rem.js';