vue3.0 PC端項目使用自適應

1.引入插件
npm install px2rem-loader -S
npm install postcss-px2rem -S

2.在根目錄新建文件vue.config.js

// 引入等比適配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同
remUnit: 100
})

module.exports = {
publicPath: "./",
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
};
3 創建rem.js

// 設置 rem 函數

function setRem() {

  //  PC端

  console.log('非移動設備')

  // 基准大小

  let baseSize = 100;

  let basePc = baseSize / 1920; // 表示1920的設計圖,使用100PX的默認值

  let vW = window.innerWidth; // 當前窗口的寬度

  let vH = window.innerHeight; // 當前窗口的高度

  // 非正常屏幕下的尺寸換算

  let dueH = vW * 1080 / 1920

  if (vH < dueH) { // 當前屏幕高度小於應有的屏幕高度，就需要根據當前屏幕高度重新計算屏幕寬度

    vW = vH * 1920 / 1080

  }

  let rem = vW * basePc; // 以默認比例值乘以當前窗口寬度,得到該寬度下的相應font-size值

  document.documentElement.style.fontSize = rem + "px";

  console.log(rem)

  // //得到html的Dom元素

  // let htmlDom = document.getElementsByTagName('html')[0];

  // //設置根元素字體大小

  // htmlDom.style.fontSize = rem + 'px';

}

// 初始化

setRem();

// 改變窗口大小時重新設置 rem

window.onresize = function () {

  setRem()

};

4 、引入

import './rem'

5、安裝lib-flexible依賴

npm install lib-flexible -S

6、找到目錄 ：node_modules/lib-flexible/flexible.js ，修改flexible.js； （不要直接搜索，搜不到的）