大屏分辨率适配

场景：

• 设计图1920*1080，

• 在不同的分辨率下，展示页面需要一致，至少不能出问题

插件

• amfe-flexible

yarn add amfe-flexible

• postcss-pxtorem

yarn add postcss-pxtorem --save-dev

示例

• 在main.js中引入amfe-flexible

// main.js

import 'amfe-flexible'

• vue.config.js 同层级创建 postcss.config.js

// postcss.config.js
// 此文件放在和 vue.config.js 同层级

module.exports = {
    plugins: {
        // tailwindcss: {},
        autoprefixer: {},
        'postcss-pxtorem': {
            rootValue: 192, // 
            // unitPrecision: 3, //保留rem小数点多少位
            propList: ['*'], // 需要被转换的属性
            selectorBlackList: ['.el-time'], // 不进行px转换的选择器，不转换element的标签样式，根据自己项目需求来定义
        },
    }
}

• 开发时，元素宽高，字体大小写px