大屏幕适配方法之：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);
}
},
最终完美实现了，与其他项目一样的缩放效果！完结！散花~