大家可以略过的哈,我就记一次,方便下次用到的时候好抄,哈哈

插件

postcss-pxtorem

配置

1.根目录新建postcss.config.js

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    // vant 37.5 [link](https://github.com/youzan/vant/issues/1181)
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*'],
      selectorBlackList: ['van-']
    }
  }
}

注意 selectorBlackList: ['van-'] 这里是为了过滤掉 vant库的CSS, vant的CSS 单位用的是PX,不过滤的话,用这个UI库会变小

2.新建rem.js

// 设置 rem 函数
function setRem () {

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

注意 这里 htmlWidth/10 的10 和 rootValue 的值的乘 应该为设计图的总宽度

3. 引入rem.js 到vue 的main.js即可

好啦 散了吧 到此结束