制作视频网站教程,海南省住房公积金管理局网上办事大厅,水发规划设计有限公司,陕西省建设资质是哪个网站1、前言 此文章作为本人大屏可视化项目的入门学习笔记#xff0c;以此作为记录#xff0c;记录一下我的大屏适配解决方案#xff0c;本项目是基于vite Vue3 js less 实现的#xff0c;首先看ui#xff0c;ui是网上随便找的#xff0c;代码是自己实现的#xff0c;后面…1、前言 此文章作为本人大屏可视化项目的入门学习笔记以此作为记录记录一下我的大屏适配解决方案本项目是基于vite Vue3 js less 实现的首先看uiui是网上随便找的代码是自己实现的后面会给出源码地址。 2、方案介绍
这里介绍一下本人用的两种方案的优缺点
方案实现方式优点缺点scale 1.通过 scale 属性根据屏幕大小 对图表进行整体的等比缩放 1.代码量少适配简单 2.一次处理后不需要在各个图表中再去单独适配1.因为是根据 ui 稿等比缩放当大屏跟 ui 稿的比例不一样时会出现周边留白情况 2.当缩放比例过大时候字体会有一点点模糊就一点点 3.当缩放比例过大时候事件热区会偏移。vw vh1.按照设计稿的尺寸将px按比例计算转为vw和vh1.可以动态计算图表的宽高字体等灵活性较高 2.当屏幕比例跟 ui 稿不一致时不会出现两边留白情况1.每个图表都需要单独做字体、间距、位移的适配比较麻烦
以上就是两种方案的比较了下面具体介绍一下两种方案的核心代码
2.1、scale解决方案
核心代码就是获取屏幕的分辨率与设计稿的分辨率比较得到一个比例然后通过 scale 进行缩放
// 适配方案先不处理先把功能实现了先
function handleScreenAuto() {const designDraftWidth 1920; //设计稿的宽度const designDraftHeight 1080; //设计稿的高度// 根据屏幕的变化适配的比例,这么处理可能会出现留白问题,可以通过控制背景色与主题色相匹配来降低留白的影响// 当 设备宽高比 16/9时两边出现留白// 当 设备宽高比 16/9时上下出现留白// 接下来写样式就直接通过px来写即可const screenWidth window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;const screenHeight window.innerHeight ||document.documentElement.clientHeight ||document.body.clientHeight;// x y轴自适应缩放const scaleX screenWidth / designDraftWidth;const scaleY screenHeight / designDraftHeight;// 设置缩放中心点 很重要否则当是2560 * 1440 、 3840 * 2160等分辨率时会出现向上偏移document.querySelector(.home-page).style.transformOrigin 0 0;// 缩放比例document.querySelector(.home-page).style.transform scale(${scaleX}, ${scaleY});
}
有了上面这段核心代码接下来我就在写样式的 时候就可以直接使用 px写样式代码了
2.2、vw vh解决方案
这个解决方案相对会复杂一点但是也还好这个方案的核心代码有
1、样式方面的代码
charset utf-8;// 默认设计稿的宽度
designWidth: 1920;// 默认设计稿的高度
designHeight: 1080;/*将px转成 vw其实就是 1920 100vwname: 需要转换的属性名px: 需要转换的数值例如width: 20px.vw(width, 20)结果就是 width: 20 / 1920 * 100vw 10.416666666666666vwvh 同理
*/
.vw(name, px) {{name}: (px / designWidth) * 100vw;
}// px 转成 vh
.vh(name, px) {{name}: (px / designHeight) * 100vh;
}.px2font(px) {font-size: (px / designWidth) * 100vw;
}当然还需要在我们的样式入口文件 引入一下根据实际使用的在对应的地方引入即可
然后还需要再vite.config.js配置一下这样我们在.vue文件写样式的时候就可以直接使用我们定义的样式方法了 css: {preprocessorOptions: {less: {// 方便在vue文件写样式的时候可以直接使用 .vw .vh 方法additionalData: import /styles/vw-vh.less;}}}
如果我们想要在.less使用定义好的方法则需要在对应的样式文件引入 经过上述的配置就可以使用了使用的地方 这里还需要去适配一下echarts 图图表的字体、间距、等需要另外定义一个方法原理与scale类似
/*** param {*} size 实际样式值* param {*} designWidth 设计稿的宽度* returns 返回一个缩放后的值*/
export const fitChartSize (size, designWidth 1920) {// 获取设备的设计宽度let clientWidth window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;if (!clientWidth) return size;// 设计宽度 / 设计宽度 就是我们要的 缩放比let scale (clientWidth / designWidth);return Number((size * scale).toFixed(3));
}
2.3、总结 如果我们制展示数据也可以接受一定的留白可以施一公scale方案留白可以通过设置背景色与主题色一致可以减轻留白的影响如果我们想要图形无论是不是 与设计稿比例一致都让图形铺满屏幕那就可以考虑使用vw vh方案其实还有一种网上还有一种 rem vw vh方案但是我觉得和scale 方案的效果差不多就没有加进来下面是源码地址master 是scale方案dev-vwvh 是vwvh 方案
源码地址
