vue使用rem(px自动转化rem)

初始化css样式的时候，需要设置默认字体的大小

*{font-size:要设置默认大小}

1、通过npm下载依赖

npm install postcss-pxtorem -D

2、在main.js引入

import "./assets/js/rem.js”

3、在postcss.config.js配置如下代码，如没有就新建

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

4、建立 rem.js ，代码如下：

// 基准大小
constbaseSize=100
// 设置 rem 函数
function setRem() {
   // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
   constscale=document.documentElement.clientWidth/1920;
   // 设置页面根节点字体大小
   document.documentElement.style.fontSize=(baseSize*scale)+'px';
   console.log(1);
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize=function() {
  setRem()
}