大屏适配几种方案
# 1. vw 适配
使用第三方插件 px 转 vw postcss-px2rem (opens new window)
# 2. scale 缩放
最近做了一个大屏项目，使用使用 scale 进行缩放来适配不同分辨率，代码如下：
//主要方法
onMounted(() => {
screenSizeFn();
window.onresize = () => {
screenSizeFn();
};
});
const screenSizeFn = () => {
//对应分辨率设置
const w = 4096;
const h = 2160;
const clientWidth = document.body.clientWidth;
const clientHeight = document.body.clientHeight;
// 计算宽高缩放比例
const scaleW = clientWidth / w;
const scaleH = clientHeight / h;
if (clientWidth / clientHeight > w / h) {
scale.value = scaleH;
} else {
scale.value = scaleW;
}
};
//对应dom绑定该样式属性
const computedStyle = computed(() => {
return {
transform: `scale(${scale.value})`,
"transform-origin": "0 0",
};
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 3 使用插件 v-scale-screen
vue2 请使用v-scale-screen@1.0.0版本，vue3 请使用v-scale-screen@2.0.0版本 npm install v-scale-screen@1.0.0 -save 或者 yarn add v-scale-screen
<v-scale-screen width="1920" height="1080">
<div>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
<v-chart>....</v-chart>
</div>
</v-scale-screen>
<script>
import VScaleScreen from "v-scale-screen";
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
上次更新: 2024/11/04, 09:43:55