Vue 可视化大屏适配方案

最近在做可视化大屏的适配，要求大屏页面能够在大屏和电脑自适应，查阅了一些资料，大体上有 3 种方案：
1、使用 transform
2、将 px 转化为 rem
3、使用 zoom

查看当前浏览器尺寸：https://www.runoob.com/try/try.php?filename=tryjs_screen_all

一、利用 CSS的 transform 属性对页面布局进行自适应缩放

计算缩放比，根据屏幕大小动态设置类名。
CSS 元素设置完全按照设计稿大小设置 px，不需要转换长度单位。我的项目设计稿给的尺寸是 1920*1080。
思路：

初始化的时候获得大屏幕的比例
把这个比例设置给css的scale变量
监听浏览器的窗口大小, 将新的比例赋给scale变量

知识点：https://www.cnblogs.com/diantao/p/4375506.html
transform 原点设置

css中缩放是使用 transform 来控制，参数可为scale、scaleX、scaleY等，但常规的缩放总以中心点为基准点，在很多时候都是很不方便的。
使用 transform-origin 来进行控制，使用 transform-origin 属性，可以改变缩放的基准点。
transform-origin: 10px 10px; // 定义缩放原点：相对于左上角的距离x、y，单位px以左上角为原点，以右上角为原点
参数可使用值：
1、参数一：left、center、right，参数二：top、center、bottom。
2、具体的像素值；
例如：transform-origin: top left;

（1）计算缩放比：
在 index.html 页面中计算缩放比：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>window.onresize = function() {setScale()}function setScale() {let designWidth = 1920 //设计稿的宽度，根据实际项目调整let designHeight = 1080 //设计稿的高度，根据实际项目调整// 缩放比let scale =document.documentElement.clientWidth / document.documentElement.clientHeight < designWidth / designHeight? document.documentElement.clientWidth / designWidth: document.documentElement.clientHeight / designHeight// 获取所有类名为  trans-common 的元素，设置 transform 属性let selectorAll = document.querySelectorAll('.trans-common')for (let i = 0; i < selectorAll.length; i++) {selectorAll[i].style = 'transform: scale(' + scale + '); '}}</script>
</html>

（2）在页面上所有需要添加适配的布局上添加类名 trans-common
例如：页面布局是这样的：

<div class="container"><div class="left trans-common trans-top-left">左侧布局</div><div class="right trans-common trans-top-right">右侧布局</div>
</div>

设置 transform 属性后，默认是从中心缩放，但是我的布局是左右布局，位置固定，此时，对于左侧的布局应该设置原点 transform-origin 为左上，右侧的布局原点为右上。添加类名：

.trans-top-left {transform-origin: top left;
}
.trans-top-right {transform-origin: top right;
}

参考资料：
（1）https://blog.csdn.net/xiaohuli_hyr/article/details/108119712
（2）https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html
（3）https://juejin.cn/post/6966103143402700837
（4）https://blog.csdn.net/weixin_43794749/article/details/118017268
（5）https://blog.csdn.net/syj573077027/article/details/117022740

二、将 px 转化为 rem

rem：根据屏幕尺寸变化动态调整根元素的字体大小
将 px 转化为 rem ,可以使用插件转换，也可以使用根元素节点字体大小来设置。但是这种设置方法，对于写在行内的 css 样式就没办法转化为 rem，所以这种方法不适用我的项目。

参考资料：
（1）https://blog.csdn.net/weixin_41192489/article/details/120004315
（2）https://blog.csdn.net/weixin_44230807/article/details/117522910

三、其他适配方案

获取屏幕尺寸比例：https://www.runoob.com/try/try.php?filename=tryjs_screen_all

参考1：Vue大数据可视化（大屏展示）解决方案：
https://blog.csdn.net/qq_40282732/article/details/105656848

参考2：Vue 大屏可视化-屏幕自适应(保持设计尺寸比例)：https://blog.csdn.net/u011097323/article/details/105288458

参考3：大屏适配解决方案__Vue.js__前端：https://www.vue-js.com/topic/60cbf3944590fe0031e59cb4

四、参考

大屏适配方案：

https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html

https://juejin.cn/post/6966103143402700837

utils 定义方法，在mounted 中直接使用【写法】
参考https://blog.csdn.net/weixin_43859882/article/details/119744867

屏幕适配思路：
参考：https://blog.csdn.net/Sophie_U/article/details/109582687

备注：评论区的解决方案： https://www.vue-js.com/topic/60cbf3944590fe0031e59cb4