前端学习-scale大屏适配方案

大屏适配实现方案

思路

根据屏幕的短边计算百分比，设置

获取缩放比例

// 根据浏览器大小推断缩放比例
getScale(width = 1920, height = 1080) {
	let ww = window.innerWidth / width
	let wh = window.innerHeight / height
	return ww < wh ? ww : wh
}

给顶级dom设置缩放

js

this.$refs.index.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`
this.$refs.index.style.width = `1920px`
this.$refs.index.style.height = `1080px`

css 居中

position: fixed;
top: 50%;
left: 50%;
transform-origin: left top;
z-index: 9999;
transition: transform 0.3s;

总结

1. 一定程度减少的了echarts重绘的性能消耗

2. 代码简单，实配简单

3. 能够保持ui设计的宽高比

4. 缩放会导致文字图片失真

5. ui会留空