使用viewport方案和postcss-px-to-viewport插件来实现屏幕适配，主要是为了让你的Vue大屏应用在不同尺寸和分辨率的屏幕上都能良好地显示。以下是一个简单的实现步骤：
1.安装
npm install postcss-px-to-viewport --save-dev
# 或者
yarn add postcss-px-to-viewport --dev
- 配置postcss.config.js
在项目根目录下创建或修改postcss.config.js文件，添加postcss-px-to-viewport插件的配置：
module.exports = { plugins: { 'postcss-px-to-viewport': { viewportWidth: 1920, // 视口宽度，根据设计稿来定 unitPrecision: 5, // 转换后的精度，即小数点位数 minPixelValue: 2, // 最小转换数值，如果为2则会转换2px以上的值 mediaQuery: false, // 允许在媒体查询中转换px exclude: [/node_modules/], // 排除node_modules目录下的文件 // viewportUnit: 'vw', // 设置要转换成的视窗单位，默认vw // selectorBlackList: [], // 黑名单，可以填写选择器，不会转换黑名单选择器内的px // minViewportWidth: 320, // 视口最小宽度 // maxViewportWidth: 5760, // 视口最大宽度 // viewportHeight: 1080, // 视口高度，根据设计稿来定 // fontViewportUnit: 'vw' // 字体使用的视窗单位 } }
};
3.然后具体布局内容
我本人更习惯 子绝父相
最大的父盒子用相对的定位 子盒子全部用绝对定位 一层层往下写盖下去
)
)
