css+js 实现可视化大屏界面任何尺寸下全屏展示

可视化界面

在做PC端可视化大屏界面的时候都会定个版心的宽高（1920*1080）按F11全屏后能够铺满整个显示屏，但是用户显示器各种尺寸各种分辨率都有，不同的尺寸下会出现滚动条，内容无法完整展示出来。

解决不同尺寸

解决办法是在页面加载完成事件和浏览器尺寸发生改变事件里面对页面进行缩放，获取到浏览器尺寸除以版心尺寸得到缩放比率

JS代码

将计算好的变量screenWidthStyle设置到元素上

let scaleX = document.body.clientWidth / 1920;
let scaleY = document.body.clientHeight / 1080;
let scale = scaleX<scaleY?scaleX:scaleY;
this.screenWidthStyle = `width: 1920px;height: 1080px;transform: scale(${scale},${scale});!important;margin:0 ${(document.body.clientWidth - 1920 * scale) / 2}px;`;

css

值得注意的是缩放总以中心点为基准点，我们要将默认设置覆盖掉让元素缩放后从左上角开始

关于缩放参考的这篇

transform-origin: 0 0;