Vue-cli3 屏幕自适应

在项目中为了屏幕适配，经常会用到rem，postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件

如何使用：

1.安装

npm i postcss-px2rem --save-dev

2.设置vue.config.js

css: {
    // 启用 CSS modules
    modules: false,
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      // 导入scss变量
      scss: {
      //  prependData: `@import "@/assets/variable.scss";`
      },
      postcss: {
        plugins: [
          //remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
          //假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
          require('postcss-px2rem')({remUnit: 16}), // 换算的基数
        ]
      }
    }
  },

3.转换的rem是根据html根节点fontSize转换的。要想随窗口自适应，就要动态根节点字体大小

public目录下创建rem.js

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

main.js中使用

(function() {
  var rem = document.createElement("script");
  rem.src = "./rem.js";
  document.body.appendChild(rem);
})();