vue项目数据大屏自适应解决方案

Posted 2023-03-23

参考技术A 描述
公司项目需要做数据大屏，自己连夜薅头发搜索查询出。目前可满足需求的方案。
可使用适用于多分辨率，移动端亦可使用
以下方法Vue3 + vite 亦可使用

安装依赖

amfe-flexible 是一个自动计算并在项目中html,body标签中添加基础font-size（用过rem单位的同学应该都知道这个是多么的重要）
postcss-px-to-viewport-8-plugin 是为了可自动将px单位转换为vw单位，避免数学不好的同学将设计稿转换单位（不喜欢vw单位的同学之后我会介绍转换r如何转换rem）

项目配置
1 在main.js中引入 amfe-flexible

2 在根目录下（也就是package.json文件同级）创建postcss.config.js文件, 配置如下

注：
如想转换rem单位亦可引入postcss-pxtorem

并于postcss.config.js文件中做如下配置

如果不想引入amfe-flexible或引入报错亦可使用以下方法实现同种效果：
新建utils/flexible.js文件

Vue 大屏自适应

参考技术A 在实际业务中，我们常用图表来做数据统计，数据展示，数据可视化等比较直观的方式来达到一目了然的数据查看，但在大屏开发过程中，常会因为适配不同屏幕而感到困扰，下面我们来解决一下这个不算难题的难题

废话不多说，先上图

[图片上传失败...(image-6ca2f3-1648048125368)]

可以看到，我们通过等比例缩放的方式，实现了自适应，同时我们也为此发布了 vue 组件 v-scale-screen

v-scale-screen 使用css属性transform实现缩放效果，进行等比例计算，达到等比例缩放的效果，同时我们也支持铺满全屏，宽度等比，高度等比，等自适应方案