Vue 可视化大屏适配方案

Vue 大屏适配 transform 属性缩放

Windyluna

12530人浏览 · 2022-01-04 11:08:03

Windyluna · 2022-01-04 11:08:03 发布

最近在做可视化大屏的适配，要求大屏页面能够在大屏和电脑自适应，查阅了一些资料，大体上有 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