方案1：利用transform的scale直接缩放。

整一个缩放组件

<template><div class="screen-adapter" id="screenAdapter" :style="style"><slot /></div>
</template><script setup>
import { onMounted, reactive } from "vue";
// 入参为设计稿宽高
const props = defineProps({width: {type: String,default: "1920",},height: {type: String,default: "1080",},
});
const style = reactive({width: props.width + "px",height: props.height + "px",transform: "scale(1) ",
});
const Debounce = (fn, t) => {const delay = t || 500;let timer;return function () {const args = arguments;if (timer) {clearTimeout(timer);}const context = this;timer = setTimeout(() => {timer = null;fn.apply(context, args);}, delay);};
};// 获取放大缩小比例
const getScale = () => {const w = window.innerWidth / props.width;const h = window.innerHeight / props.height;return [w, h];
};
// 设置比例
const setScale = () => {style.transform = "scale(" + getScale()[0] + "," + getScale()[1] + ") ";
};
onMounted(() => {setScale();window.onresize = Debounce(setScale, 1000);
});
</script><style lang="less" scoped>
.screen-adapter {transform-origin: 0 0;transition: 0.3s;
}
</style>

用于在app.vue的根

<template><ScreenAdapter><router-view></router-view></ScreenAdapter>
</template>

优点：

不影响性能
开发方便，不用考虑echarts及其他插件的文字内容和定位适应，高宽都可直接按设计稿的尺寸套

缺点

会模糊会模糊会模糊会模糊会模糊，当其他组件使用了定位或transform的时候，内部文字可能会出现模糊（仿佛眼睛度数又上升了...
不能适配像素特别高的屏。由于是按照1920*1080进行缩放的，所以在特高像素下就会gg（可能会变成马赛克(dog。（但是也能解决，在知道像素后在用插件改代码...(但现在开发快完成了，最终显示器像素还是不明确...靠

方案2：rem

考虑到应该不会存在窗口大小频繁切换的情况，就先忽略了resize。（希望以后也别让我加这需求（但考虑到万一有这需求，从改动方便来说，先用了全局。

懒得加文件了，先config扔一起（这种命名一般是常量...但是...这里就当全局了吧（反正就我一个开发：(

const API_BASE_URL = "";
const FILE_URL = "";let WIN_SCALE = 1;function SET_SCALE() {const scaleWidth = document.documentElement.clientWidth / 1920;const scaleHeight = document.documentElement.clientHeight / 1080;WIN_SCALE = Math.min(scaleWidth, scaleHeight);
}
SET_SCALE();
function SCALE_INT(val) {const res = parseInt(val * WIN_SCALE);return res == 0 ? 1 : parseInt(val * WIN_SCALE);
}

在index.html中引入

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title><%= htmlWebpackPlugin.options.title %></title><script type="text/javascript" src="./config.js"></script></head><body><div id="root"></div></body>
</html>

fontSize set文件，在main.js中引入这东西

// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {let fontSize = baseSize * WIN_SCALE > 12 ? baseSize * WIN_SCALE : 12;document.documentElement.style.fontSize = fontSize + "px";
}
//初始化
setRem();// window.onresize = function () {
//   SET_SCALE();
//   setRem();
// };

其他配置

echarts自定义主题配置


const labelFontSize = SCALE_INT(12);
const lineWidth = SCALE_INT(2);
const px5 = SCALE_INT(5),px8 = SCALE_INT(8);
export default {color: ["#fcce4a", "#9960f8", "#2cffb1", "#46c0ff", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"],backgroundColor: "rgba(0, 0, 0, 0)",textStyle: {},title: {textStyle: {color: "#464646",},subtextStyle: {color: "#6E7079",},},line: {itemStyle: {borderWidth: px5,shadowColor: "rgba(255,255,255 ,1)",shadowBlur: px5,},lineStyle: {width: lineWidth,},symbolSize: px8,symbol: "emptyCircle",smooth: true,},......
};

优点

高清

缺点

开发麻烦....一些块的宽高需用百分比，以及插件也需要进行计算
性能-1-1

总结

在不明确像素的情况下可以两个方案都用，等最终确认像素后选出更适合的适配方案

【工作笔记】不明确最终像素比的情况下的自适应大屏解决方案相关推荐

苹果手机投影_没有无线网络的情况下手机无线投屏投影仪
没有无线网络的情况下手机无线投屏投影仪从昨天到今天,有两个老师来咨询过在没有无线网络的情况下,手机怎么无线投屏投影仪. 一个老师是因为需要去多个学校进行演讲,地点不确定,所以希望能在没有网络的情况下 ...
win10在不关闭防火墙的情况下实现无线投屏
一.问题描述手机要想通过无线投屏连接到win10电脑的显示器,一般都需要关闭系统自带的防火墙才行.如果不关闭防火墙,有可能发生"投影出现问题"的异常情况,见下图.可是一旦要使用无 ...
python实现双屏情况下，第二个屏播发视频
python实现双屏情况下,第二个屏播发视频业务情况环境准备业务情况需要在系统启动的情况下,在第二个显示屏上播发MP4的视频, 环境准备安装QQ影音将video.mp4设置成QQ影音默认播 ...
如何在工作繁重、睡眠较少的情况下保持旺盛精力？
作者:陈炬链接:https://www.zhihu.com/question/23177623/answer/47785761 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
Thymeleaf——在不覆盖现有class属性的情况下动态添加CSS class解决方案
问题描述 th:class动态添加CSS class会覆盖现有class属性,导致class较多时,表达式过长. 官方文档 https://www.thymeleaf.org/doc/tutorial ...
什么情况下需要搭建大数据平台
大数据平台就是旨在为计算机世界提供一个尽可能全局的.综合的视图.利用大数据平台帮助我们发现事物间的关联性,多个角度去看待问题,辅助我们做出正确的决策,并推测出整个形式的发展趋势和结果,辅助用户决策,从 ...
导出坏块表oracle,obj$坏块情况下exp导出单个表解决方案
在前面一篇(obj$坏块exp不能执行原因探讨)已经研究了在obj$出现坏块的情况下,导致exp导出单个表不能成功的原因,这篇给出解决方案 1.重新创建exu81javt视图 SQL> CREA ...
【Python学习笔记】输入raw_input()，特殊情况下也可以用input()
2019独角兽企业重金招聘Python工程师标准>>> 上篇提到,输出用print 现在说,输入要用raw_input() # input name = raw_input() pr ...
微服务升级_SpringCloud Alibaba工作笔记0028---Nacos之Nacos集群配置下
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 好,咱们继续配置nacos的集群,上面的内容都已经配置好了,然后我们去配置NGINX,让ngin ...

【工作笔记】不明确最终像素比的情况下的自适应大屏解决方案

方案1：利用transform的scale直接缩放。

优点：

缺点

方案2：rem

其他配置

优点

缺点

总结

【工作笔记】不明确最终像素比的情况下的自适应大屏解决方案相关推荐

最新文章

热门文章