大屏邪修自适应

shadow_glory2026-05-23 8:23

之前提到过通过sass函数和postcss来设置样式，使项目适应大屏，但是如果一些地方比如echats或者其他ui组件不好设置样式函数来修改样式，可以尝试下邪修写法。

因为之前甲方使用的3:2的屏，怎么都不满意，反倒是别人通过拉伸的方案满意了，那就邪一把！

javascript 复制代码

const innerWidth = ref<number>(0);
const innerHeight = ref<number>(0);
const setScreenVars = () => {
  innerWidth.value = window.innerWidth;
  innerHeight.value = window.innerHeight;
};
setScreenVars();

首先初始化获取到浏览器的宽高方便使用

javascript 复制代码

const pageTransform = computed(() => {
  return `scale(${innerWidth.value / 1920}, ${innerHeight.value / 1080})`;
});

以1920*1080为基准，通过transform让元素变形

html 复制代码

<div
    class="largeScreen"
    :style="{ transform: pageTransform }"
>
</div>

大屏的最大层容器使用:style动态样式让最大容器变形

javascript 复制代码

window.addEventListener("resize", setScreenVars);

最后通过window的监听事件，浏览器大小改变的时候重新调用获取浏览器大小的方法，innerWidth和innerHeight改变时pageTransform重新计算，div.largeScreen就会改变，这样就可以了，里面的其他元素依旧以1920*1080去开发就行了。

够邪门吧