一种简单粗暴的大屏自适应方案,原理及案例

现状

现在最流行的大屏自适应手法: scale缩放
为了解决2d/3d的点击交互问题,通常设计成了2个层容器。图表层和2d/3d层。图表层负责缩放,2d/3d层保持100%显示,避免缩放引起的交互事件event问题。

下图是一个1920*1080的大屏示意图

使用常规的缩放方法,让大屏在窗口内最大化显示。大屏在不同的窗口中出现了空白区域,并没有充满整个屏幕。

新的方法

在缩放的基础上,对指定的要素进行贴边处理。还是这张设计图,我们希望上下吸附到窗口最上面和最下面。左右图表吸附到窗口的最左边和最右边。

这里面需要简单的计算,其中a是图表层 scale属性

js 复制代码
var halftop = (window.innerHeight- (1080*a.scaleY))/2/a.scaleY;
var halfleft = (window.innerWidth- (1920*a.scaleX))/2/a.scaleX; 

对指定id的容器,在resize事件中设置上下左右浮动。如下图

实战项目效果

注,下面图片中的数据指标、城市名、姓名、图像均为虚拟数据。

在实际应用中,一般1920*1080设计稿已宽屏为主,如果是竖屏大屏(下图5),需要设计竖屏UI。

你也可以下载该项目demo, 对窗口进行缩放查看效果 pan.baidu.com/s/1hE_C9x9i...

相关推荐
华仔啊11 小时前
Vue3 登录页还能这么丝滑?这个 hover 效果太惊艳了
前端·css·vue.js
IT_陈寒11 小时前
JavaScript引擎优化:5个90%开发者都不知道的V8隐藏性能技巧
前端·人工智能·后端
云和数据.ChenGuang11 小时前
Component template requires a root element, rather than just错误
前端·javascript·vue.js
mCell11 小时前
为博客添加 RSS 订阅
前端·vitepress·rss
艾小码11 小时前
告别JS初学者噩梦:这样写流程控制和函数才叫优雅
前端·javascript
sdgsdgdsgc13 小时前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生98413 小时前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
黑云压城After16 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务18 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友18 小时前
什么是断言?
前端·后端·安全