大屏幕适配方法之: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

相关文章

Python函数返回多个值的多种方法小结

《Python函数返回多个值的多种方法小结》在Python中,函数通常用于封装一段代码,使其可以重复调用,有时,我们希望一个函数能够返回多个值,Python提供了几种不同的方法来实现这一点,需要的朋友... 目录一、使用元组(Tuple):二、使用列表(list)三、使用字典(Dictionary)四、 使

Linux查看系统盘和SSD盘的容量、型号及挂载信息的方法

《Linux查看系统盘和SSD盘的容量、型号及挂载信息的方法》在Linux系统中,管理磁盘设备和分区是日常运维工作的重要部分,而lsblk命令是一个强大的工具,它用于列出系统中的块设备(blockde... 目录1. 查看所有磁盘的物理信息方法 1:使用 lsblk(推荐)方法 2:使用 fdisk -l(

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript(JS)动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法(一)分析网络请求1

MySQL查看表的最后一个ID的常见方法

《MySQL查看表的最后一个ID的常见方法》在使用MySQL数据库时,我们经常会遇到需要查看表中最后一个id值的场景,无论是为了调试、数据分析还是其他用途,了解如何快速获取最后一个id都是非常实用的技... 目录背景介绍方法一:使用MAX()函数示例代码解释适用场景方法二:按id降序排序并取第一条示例代码解

Python中合并列表(list)的六种方法小结

《Python中合并列表(list)的六种方法小结》本文主要介绍了Python中合并列表(list)的六种方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录一、直接用 + 合并列表二、用 extend() js方法三、用 zip() 函数交叉合并四、用

Java 中的跨域问题解决方法

《Java中的跨域问题解决方法》跨域问题本质上是浏览器的一种安全机制,与Java本身无关,但Java后端开发者需要理解其来源以便正确解决,下面给大家介绍Java中的跨域问题解决方法,感兴趣的朋友一起... 目录1、Java 中跨域问题的来源1.1. 浏览器同源策略(Same-Origin Policy)1.

Java Stream.reduce()方法操作实际案例讲解

《JavaStream.reduce()方法操作实际案例讲解》reduce是JavaStreamAPI中的一个核心操作,用于将流中的元素组合起来产生单个结果,:本文主要介绍JavaStream.... 目录一、reduce的基本概念1. 什么是reduce操作2. reduce方法的三种形式二、reduce

MybatisX快速生成增删改查的方法示例

《MybatisX快速生成增删改查的方法示例》MybatisX是基于IDEA的MyBatis/MyBatis-Plus开发插件,本文主要介绍了MybatisX快速生成增删改查的方法示例,文中通过示例代... 目录1 安装2 基本功能2.1 XML跳转2.2 代码生成2.2.1 生成.xml中的sql语句头2

python3 pip终端出现错误解决的方法详解

《python3pip终端出现错误解决的方法详解》这篇文章主要为大家详细介绍了python3pip如果在终端出现错误该如何解决,文中的示例方法讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下... 目录前言一、查看是否已安装pip二、查看是否添加至环境变量1.查看环境变量是http://www.cppcns

Linux给磁盘扩容(LVM方式)的方法实现

《Linux给磁盘扩容(LVM方式)的方法实现》本文主要介绍了Linux给磁盘扩容(LVM方式)的方法实现,涵盖PV/VG/LV概念及操作步骤,具有一定的参考价值,感兴趣的可以了解一下... 目录1 概念2 实战2.1 相关基础命令2.2 开始给LVM扩容2.3 总结最近测试性能,在本地打数据时,发现磁盘空