大屏幕适配方法之：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()实现了，页面整体的缩放。

步骤

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

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

2. 设置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);
				}
			},

最终完美实现了，与其他项目一样的缩放效果！完结！散花~