[vue2] vue2 adapts to the PC side, solves browser scaling problems, and solves computer display settings scaling and resolution issues

vue adapts to the PC screen, the font size remains unchanged

1. Download postcss-px2rem and px2rem-loader

npm i postcss-px2rem px2rem-loader

2. Create a new utils folder in the src directory, and create a rem.js file below

// rem等比适配配置文件
// 基准大小
const baseSize = 16
    // 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920    //当前设计稿为1920  如果是750则 替换为 750
        // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
    // 改变窗口大小时重新设置 rem
window.onresize = function() {
    setRem()
}

3. Import it in main.js

import './utils/rem'

4. Create a new vue.config.js in the root directory

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

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

// 使用等比适配插件
module.exports = {
    lintOnSave: false,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    postcss
                ]
            }
        }
    }
}

This solves the adaptation problem~