公司老项目改造适配不同分辨率2k、3k、4k

项目改造适配不同分辨率

最近公司要做项目适配2k、3k、4k屏的分辨率，在网上找了很多中方案，常用且方便的是使用zoom全局缩放，因为是老项目所以对样式进行了重写整体使用了flex+百分比布局

使用

1、在utils文件夹中新建一个zoom.js文件这个是我自己设置的一个缩放比例，具体大小可根据实际项目具体效果微调

export function setRem () {// 2560*1440 2k// 2560*1600 2k// 3200*1800 3k// 3840*2160 4k// 3840/1920 = 2const max = window.innerWidth;if(max>=3840) {document.body.style.zoom = 2;}else if(max>=2600&&max<3840){document.body.style.zoom = 1.65;}else if(max>=2400&&max<2600){document.body.style.zoom = 1.36;}else if(max>=1900&&max<2400){document.body.style.zoom = 1;}else if(max>=1600&&max<1900){document.body.style.zoom = 0.8;}else if(max>=1200&&max<1600){document.body.style.zoom = max / 1600;}else if(max>=800&&max<1200){document.body.style.zoom = max/1600;}else if(max>=500&&max<800){document.body.style.zoom = max / 800}else{document.body.style.zoom = max / 450;}
}

2、在main.js中导入使用

import { setRem } from './utils/zoom';
setRem();

3、效果图

4、整体布局使用了flex布局或者使用百分比或者用elementui的栅格布局页面就不会乱在对整体内容的缩放效果就会很好。

适配后出现的其他问题

因为我这个项目中使用了好多echarts图表，全局使用zoom缩放导致echarts位置错位（比如鼠标经过饼图区域没反应或者鼠标经过饼图红色区域显示的是蓝色区域的数据等错位问题）

定义一个容器用于存放echarts

//外层盒子<div class="pie-chart">//echarts 容器<div id="pieCharts" :style="`width: 100%;height:100%; zoom:${zoomrAtio};transform:scale(${zoom});transform-origin:0px 0px;`" /></div>

在data中定义两个变量

data() {return {zoom: '',zoomrAtio: '',};},

在初始化容器后再进行添加

 getPieEcharts() {const _this = this;var pieData = _this.pieList.sort(_this.compare("value", false));const pieEcharts = this.$echarts.init(document.getElementById("pieCharts"));const option = {tooltip: {trigger: "item",borderWidth: 0,formatter: function (param) {return `${param.marker}${param.name}: ${param.value.toFixed(2)}kwh, 占比: ${param.percent}%`;},backgroundColor: "rgba(255,255,255,1)",extraCssText: "box-shadow:0 0 10px rgba(0,120,234,0.1);color:#333333;font-size:16px",textStyle: {fontSize: 24,lineHeight: 50,},padding: [5, 15],},color: ["#5570c6","#91cc76","#fac858","#ed6666","#73c0de","#3ba272","#fc8352","#9a61b4","#ecc49f",],legend: {type: "plain",orient: "vertical",icon: "circle",show: true,right: "0%",top: "center",itemHeight: 10,itemGap: 10,formatter: function (name) {var total = 0;var target;for (var i = 0, l = _this.pieList.length; i < l; i++) {total += _this.pieList[i].value;if (_this.pieList[i].name === name) {target = _this.pieList[i].value;}}var arr = [];if (target === 0) {arr = ["{a|" + 0 + "%}", "{b|" + name + "\n}"];} else {arr = ["{a|" + ((target / total) * 100).toFixed(2) + "%}","{b|" + name + "\n}",];}return arr.join("\n");},textStyle: {// label: { show: true },color: this.echartfc,padding: this.pieList.length == 5 ? [0, 10, -10, 0] : [26, 10, -10, 0],rich: {a: {fontSize: 20,verticalAlign: "top",align: "left",lineHeight: 26,fontWeight: 400,},b: {fontSize: 14,align: "left",color: "#999999",lineHeight: this.pieList.length == 5 ? 14 : 30,padding: this.pieList.length == 5 ? [20, -10, 20, 0] : [0, -10, 20, 0],},},},},series: [{type: "pie",radius: "76%",center: ["35%", "50%"],data: pieData,// roseType: 'radius',// 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互label: {show: false,position: "inside",formatter: "{b}:{d}%",},itemStyle: {shadowBlur: 10,shadowColor: "rgba(9, 45, 97, 0.2)",shadowOffsetX: 0,shadowOffsetY: 0,},},],};pieEcharts.setOption(option);//上面的不用管//核心代码区域 zoom  zoomrAtio 变量一点要等echarts初始化完成后再加上才有效果，this.$nextTick(()=>{this.zoom =  document.body.style.zoom;this.zoomrAtio =  (1/document.body.style.zoom).toFixed(2);});},

添加上面代码后在不同分辨率情况下鼠标经过移动点击都能正常显示了

公司老项目改造适配不同分辨率2k、3k、4k相关推荐

android 2k屏分辨率,2K、4K、8K分辨率屏幕有用吗？看看它们怎么说！
Retina Display(视网膜)是苹果最早提出来的概念.2010年,苹果iPhone 4将960×640的像素压缩到一个3.5英寸的显示屏内,使像素密度达到326像素/英寸(ppi),超越了人眼 ...
Spring Boot 如何快速改造老项目？
1 前言碎语博主公司一个项目在开发中使用某些功能的时候,受限于spring低版本的限制,故索性将整个模块升级为spring boot,在这里做个记录,希望能帮助到有相同场景的朋友. 整个改造过程非常 ...
适配2K和4K分辨率
适配2K和4K分辨率本方法适用于项目已经在1920*1080分辨率的布局下定型的情况,在适应不同分辨率 1.在utils文件夹下创建一个detectZoom.js文件 export const de ...
改造ie老项目爬坑之showModalDialog
改造ie老项目爬坑之showModalDialog 业务场景公司的老项目都是使用的window.showModalDialog()这种方式实现的打开窗口,并且项目里的提示语均使用的alert和con ...
modbus tcp怎么设计通讯状态是否正常_上海圆通蛟龙老地块改造项目一号厂房消防设备电源监控系统的设计与应用...
点击蓝字关注我们摘要本文简述了消防设备电源的组成原理,分析了消防设备电源监控系统在应用中的设计依据和相关规范.通过安科瑞消防设备电源监控系统在上海圆通蛟龙老地块改造项目一号厂房项目的实例介绍,阐 ...
公司已经3个月发不出工资了。没有钱招不到人，老项目一堆烂摊子。
公司已经3个月发不出工资了.没有钱招不到人,留下一堆老项目的烂摊子. 玩了那么多年,又要从头开始学编程.给自己一年的时间,希望能将濒于死亡公司拯救吧?那天混不下去了,望大家收留!
Redis解决老项目集群Session共享案例与回顾
老项目突然之间客户要用了而且用户量还不少,后端移动端都需要给升级.第一改进的时候做了移动端与后端的服务分流,这次升级为分布式集群模式.分布式集群模式需要解决Session共享问题和数据一致性分布式锁处 ...
Android 万能适配方案和UI屏幕适配不同分辨率最全面最易懂的
文章目录 1.屏幕尺寸 2.屏幕分辨率 3.屏幕像素密度 4.图片的适配方案 1.屏幕尺寸屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米(下面有图文介绍) 比如常见的屏幕尺寸有2.4 ...
记一次 react 15.3.1 老项目升级到 react 16.7.0 之路
互相交流学习,请加我微信: iyangyuanjian,QQ:624508914 1.前言该项目是公司内部服务与外部服务的中台系统,我称之为大杂烩项目始于:2015年10月8号 18:31:39秒 ...

公司老项目改造适配不同分辨率2k、3k、4k

项目改造适配不同分辨率

适配后出现的其他问题

公司老项目改造适配不同分辨率2k、3k、4k相关推荐

最新文章

热门文章