vue大屏

使用viewport方案和postcss-px-to-viewport插件来实现屏幕适配，主要是为了让你的Vue大屏应用在不同尺寸和分辨率的屏幕上都能良好地显示。以下是一个简单的实现步骤：
1.安装

npm install postcss-px-to-viewport --save-dev  
# 或者  
yarn add postcss-px-to-viewport --dev
1
2
3

2. 配置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' // 字体使用的视窗单位  
    }  
  }  
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.然后具体布局内容
我本人更习惯 子绝父相
最大的父盒子用相对的定位 子盒子全部用绝对定位 一层层往下写盖下去