【Vue2 pc端项目不同分辨率屏幕窗口自适应】

Vue2 pc端项目不同分辨率屏幕窗口自适应

1.脚手架创建项目

vue create 项目名

2.安装 postcss-pxtorem

npm install postcss-pxtorem -D

postcss-pxtorem 插件会将页面中的px像素单位，经过计算然后改写成rem，
在项目中根据原型图上的数据单位来进行样式编辑就可以
3.配置相关文件
可以直接将下面代码放到main.js文件中，也可以单独写一个js文件，然后在main.js 中挂载

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

// 屏幕自适应穿透px为rem模板
const baseSize = 16; // 设计稿根字体大小
function setRem() {
  if (
    document.documentElement.clientWidth >= 762 &&
    document.documentElement.clientWidth <= 2040
  ) {
    const scale = document.documentElement.clientWidth / 1920; // 计算缩放比例
    document.documentElement.style.fontSize =
      baseSize * Math.min(scale, 2) + "px"; // 设置根字体大小
  }
  if (
    document.documentElement.clientWidth >= 300 &&
    document.documentElement.clientWidth <= 762
  ) {
    // const scale = (750) / 1920 // 计算缩放比例
    document.documentElement.style.fontSize = 62.5 + "%"; // 设置根字体大小
    // document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
  }
}

setRem();
window.addEventListener("resize", setRem); // 窗口大小改变时重新计算

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

我这边是按照1920的尺寸设置，可以根据实际大小设置
然后在项目的根目录下创建一个名字为 postcss.config 的js文件，文件中放入一下内容

module.exports = {
  plugins: {
    'autoprefixer': {},
    'postcss-pxtorem': {
      rootValue: 16, // 设计稿根字体大小
      unitPrecision: 5, // 转换后保留小数点位数
      propList: ['*'], // 将所有属性的px值都转换为rem
      selectorBlackList: [], // 不需要转换的类名
      replace: true,
      mediaQuery: false,
      minPixelValue: 0 // 小于等于0时不转换
    }
  }
}

至此窗口自适应大小就配置完了

配置完成以后 就会将项目中写的500px像素单位转写成31.25rem单位
但是这种方式只能将style中的css样式改写成rem，行内的样式不能进行改写