大屏幕适配方法之：transform:scale()

CSS3新增的属性transform主要用于设置元素的变形，比如旋转、倾斜、缩放等。我们今天要用到的正式它的缩放功能transform:scale()

取值

单一数值
单一的数值即指定了一个缩放系数，同时作用于 X 轴和 Y 轴让该元素进行缩放，相当于指定了单个值的 scale()(2D 缩放) 函数。
两个长度/百分比值
两个数值即分别指定了 2D 比例的 X 轴和 Y 轴的缩放系数，相当于指定了两个值的 scale()（2D 缩放）函数。
三个长度/百分比值
三个数值即分别指定了 3D 比例的 X 轴、Y 轴和 Z 轴的缩放系数。相当于一个 scale3d() 函数。
工作中遇到一个问题，页面中其他元素通过使用VW、VH实现了自适应。唯独两个echarts图无法设置VW和VH，导致鼠标滚轮滚动页面出现严重变形。

解决方式一

在拖动窗口或者鼠标滚轮在页面中滚动实现缩放时，监听window的resize事件，并在事件中调用echarts的resize()方法。

window.onresize = function () {echart1.resize()echart2.resize()
}

并无卵用~

解决方式二

同事建议使用vue-echarts，通过属性autoresize可以实现echarts图的自动缩放

<template><div style="width:100vw"><v-chart autoresize :option="option_column" style="height: 400px"></v-chart></div>
</template><script>
export default {data() {return {option_column: {title: { text: "Column Chart" },tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],},};},
};
</script><style  scoped lang="scss">
</style>

可能是代码结构或者别的问题，依然无法实现echarts图缩放而不变形的效果。

最终解决方法

公司的项目使用了微前端架构，不同的小项目可以融合在一起，别的项目页面与我所开发的页面结构大致相同，它们已经实现了缩放功能。由于他们的代码是通过低代码平台实现的，我们无法查看它们的代码逻辑。但经过同事提醒，它们可能使用了transform:scale()这个属性来实现的，通过控制台观察它们元素属性，最后找到了最外层使用的transform:scale()的元素。最后经过一步步调整，终于靠transform:scale()实现了，页面整体的缩放。

步骤

首先要给页面的最外层设置一个宽高，一般是设计图的尺寸，并指定缩放的基准点。

	.app{	 width:1900px;height:1080px;transform-origin: top left;}

设置window.resize的监听事件，并在回调函数中计算出页面缩放的比例，并同步设置给外层app的transform:scale()上

window.onresize = function () {echart1.resize()echart2.resize()setTimeout(() => {						let currentWidth = window.innerWidth;// let scale = currentWidth / idealWidth;// const currentSize = { width: window.innerWidth, height: window.innerHeight };// const scale = Math.min(initialSize.width / currentSize.width, initialSize.height / currentSize.height); // 取较小的比例，以防止页面变形var scaleW = window.innerWidth / 1900; // 假设1200px是设计稿的原始宽度var scaleH = window.innerHeight / 1080; // 假设1200px是设计稿的原始宽度// document.body.style.transform = 'scale(' + scale + ')'; // 缩放比例// document.body.style.transformOrigin = 'top left'; // 确保缩放从左上角开始console.log(currentWidth,'currentWidth....')console.log(scaleW,'scaleW....')console.log(scaleH,'scaleH....')//document.getElementById('app').style.transform = `scale(${scale}, ${scale})`;document.getElementById('app').style.transform = `scale(${scaleW}, ${scaleH})`;}, 500);}},