Vue项目，在PC端不同分辨率下的适配方案

     比如UI是按照 1920*1080 设计，按照UI图开发。

     当小于1920*1080时需要适配，大于或等于 1920*1080 时不需要适配，按照 1920*1080 效果展示即可。

一、下载插件包 postcss-px2rem 和 px2rem-loader

二、创建一个 rem.js  并在 main.js 中引入

    const baseSize = 16;
    function setRem() {
        const _screen = window.screen.width;
        if (_screen < 1920) {
            const scale = _screen / 1920;
            // 设置页面根节点字体大小（ Math.min(scale, 2)指最高放大比例为2，可根据实际业务需求调整 ）
            document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
        }
    }

    setRem();

    window.onresize = function() {
        setRem();
    };

三、以下两种方式均可

（1）可以在 vue.config.js 如下配置

    const Px2rem = require('postcss-px2rem');
    const Postcss = Px2rem({
        // 基准大小 baseSize，需要和rem.js中相同
        remUnit: 16,
    });
    module.exports = {
          css: {
            loaderOptions: {
                postcss: {
                    plugins: [
                        Postcss              
                    ],
                },
            },
        },
    }

（2）也可以或者 创建一个 postcss.config.js
   

     const px2rem = require('postcss-px2rem');
     module.exports = {
         plugins: [px2rem({
            rootValue: 16, unitPrecision: 5, propList: ['*']
         })],
     };