本文主要是介绍大屏幕适配方法之：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);}},
最终完美实现了，与其他项目一样的缩放效果！完结！散花~
这篇关于大屏幕适配方法之：transform:scale()的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
