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

2024-05-24 20:28

本文主要是介绍大屏幕适配方法之: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;}
  1. 设置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()的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/999443

相关文章

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

浅谈主机加固,六种有效的主机加固方法

在数字化时代,数据的价值不言而喻,但随之而来的安全威胁也日益严峻。从勒索病毒到内部泄露,企业的数据安全面临着前所未有的挑战。为了应对这些挑战,一种全新的主机加固解决方案应运而生。 MCK主机加固解决方案,采用先进的安全容器中间件技术,构建起一套内核级的纵深立体防护体系。这一体系突破了传统安全防护的局限,即使在管理员权限被恶意利用的情况下,也能确保服务器的安全稳定运行。 普适主机加固措施:

webm怎么转换成mp4?这几种方法超多人在用!

webm怎么转换成mp4?WebM作为一种新兴的视频编码格式,近年来逐渐进入大众视野,其背后承载着诸多优势,但同时也伴随着不容忽视的局限性,首要挑战在于其兼容性边界,尽管WebM已广泛适应于众多网站与软件平台,但在特定应用环境或老旧设备上,其兼容难题依旧凸显,为用户体验带来不便,再者,WebM格式的非普适性也体现在编辑流程上,由于它并非行业内的通用标准,编辑过程中可能会遭遇格式不兼容的障碍,导致操

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡,拥有登录权限的账号密码,一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 (如果是1集群把75改成66) 交互式开发 执行器选Terminal 密码随便设一个(需记住) 工作空间:私有数据、全部文件 加速器选GeForce_RTX_2080_Ti

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

AI(文生语音)-TTS 技术线路探索学习:从拼接式参数化方法到Tacotron端到端输出

AI(文生语音)-TTS 技术线路探索学习:从拼接式参数化方法到Tacotron端到端输出 在数字化时代,文本到语音(Text-to-Speech, TTS)技术已成为人机交互的关键桥梁,无论是为视障人士提供辅助阅读,还是为智能助手注入声音的灵魂,TTS 技术都扮演着至关重要的角色。从最初的拼接式方法到参数化技术,再到现今的深度学习解决方案,TTS 技术经历了一段长足的进步。这篇文章将带您穿越时

模版方法模式template method

学习笔记,原文链接 https://refactoringguru.cn/design-patterns/template-method 超类中定义了一个算法的框架, 允许子类在不修改结构的情况下重写算法的特定步骤。 上层接口有默认实现的方法和子类需要自己实现的方法

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

消除安卓SDK更新时的“https://dl-ssl.google.com refused”异常的方法

消除安卓SDK更新时的“https://dl-ssl.google.com refused”异常的方法   消除安卓SDK更新时的“https://dl-ssl.google.com refused”异常的方法 [转载]原地址:http://blog.csdn.net/x605940745/article/details/17911115 消除SDK更新时的“