可视化大屏自适应:autofit.js 一行搞定布局

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北,关注公众号

回复1,加入高级Node交流群

作者:德莱厄斯

原文:https://juejin.cn/post/7224015103481118757

2023-05-15 更新:关于autofit.js 问答与解惑,请访问:autofit.js 问答和食用指南[1]

在线DEMO(非大屏项目):farm.sino-eco.com/website/bin…[2] (autofit.js v1.1.2+)

可视化大屏适配/自适应现状

可视化大屏的适配是一个老生常谈的话题了,现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢?因为目前市面上适配工具每一个都无法做到完美的效果,做出来的东西都差不多,最终实现效果都逃不出白边的手掌心,可以解决白边问题的,要么太过于复杂,要么会影响dom结构。

三大常用方式
  1. vw/vh方案

    1. 概述:按照设计稿的尺寸,将px按比例计算转为vw和vh

    2. 优点:可以动态计算图表的宽高,字体等,灵活性较高,当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况

    3. 缺点:每个图表都需要单独做字体、间距、位移的适配,比较麻烦

  2. scale方案

    1. 概述:也是目前效果最好的一个方案

    2. 优点:代码量少,适配简单 、一次处理后不需要在各个图表中再去单独适配.

    3. 缺点:留白,有事件热区偏移,下面介绍的autofit.js已经完全解决了此问题

  3. rem + vw vh方案

    1. 概述:这名字一听就麻烦,具体方法为获得 rem 的基准值 ,动态的计算html根元素的font-size ,图表中通过 vw vh 动态计算字体、间距、位移等

    2. 优点:布局的自适应代码量少,适配简单

    3. 缺点:留白,有时图表需要单独适配字体

基于此背景,我决定要造一个简单又好用的轮子。

解决留白问题

留白问题是在使用scale时才会出现,而其他方式实现起来又复杂,效果也不算太理想,总会破坏掉原有的结构,可能使元素挤在一起,所以我们还是选择使用scale方案,不过这次要做出一点小小的改变。

常用分辨率

首先来看一下我的拯救者的分辨率:

6d5eaa005e475b28d4b6ec2b0ba2471c.png

它可以代表从1920往下的分辨率

我们可以发现,比例分别是:1.77、1.6、1.77、1.6、1.33... 总之,没有特别夸张的宽高比。

计算补齐白边所需的px

只要没有特别夸张的宽高比,就不会出现特别宽或者特别高的白边,那么我们能不能直接将元素宽高补过去?也就是说,当屏幕右侧有白边时,我们就让宽度多出一个白边的px,当屏幕下方有白边时,我们就让高度多出一个白边的px。

很喜欢CSGO玩家的一句话:"啊?"

先想一下,如果此时按宽度比例缩放,会在下方留下白边,所以设置一下它的高度,设置多少呢?比如 scale==0.8 ,也就是说整个#app缩小了0.8倍,我们需要将高扩大多少倍才可以回到原来的大小呢?

b44fc4bc23d1dccdd83c787a0c7df490.jpeg

QQ录屏20230420144111

emmm.....

算数我最不在行了,启动高材生

07caeded3c90099a8a09749c7661917d.png

image-20230420143742913

原来是八分之十,我vue烧了。

当浏览器窗口比设计稿大或者小的时候,就应该触发缩放,但是比例不一定,如果按照scale等比缩放时,宽度从1920缩小0.8倍也就是1536,而高度缩小0.8也就是743,如果此时浏览器高度过高,那么就会出现下方的白边,根据高材生所说的,缩小0.8后只需要放大八分之十就可以变回原大小,所以以现在的高度743*1.25=928,使宽度=928px就可以完全充满白边!

思路是正确的,但是能不能再简单一点

是浏览器高度!我忽略了浏览器高度,我可以直接使用浏览器高度乘以1.25然后再缩放达0.8!就是 1 !

也就是说 clientHeight / scale 就等于我们需要的高度!

我们用代码试一试(autofit.js初代核心代码)

function keepFit(designWidth, designHeight, renderDom) {
  let clientHeight = document.documentElement.clientHeight;
  let clientWidth = document.documentElement.clientWidth;
  let scale = 1;
  if (clientWidth / clientHeight < designWidth / designHeight) {
    scale = (clientWidth / designWidth)
    document.querySelector(renderDom).style.height = `${clientHeight / scale}px`;
  } else {
    scale = (clientHeight / designHeight)
    document.querySelector(renderDom).style.width = `${clientWidth / scale}px`;
  }
  document.querySelector(renderDom).style.transform = `scale(${scale})`;
}

解释一下:

参数分别是:设计稿的宽高和你要适配的元素,在vue中可以直接传#app。

下面的if判断的是宽度固定还是高度固定,当屏幕宽高比小于设计宽高比时,

我们把高度写成 clientHeight / scale ,宽度也是同理。

最终效果

将这段代码放到App.vue的mounted运行一下

482226549464b2cad13e9057d302dea9.jpeg

autofit

如上图所示:我们成功了,我们仅用了1 2 3 4....这么几行代码,就做到了足以媲美复杂写法的自适应!

我把这些东西封装了一个npm包:autofit.js[3] ,开箱即用,欢迎下载!

亲手打造集成工具:autofit.js

2a6b43aca86ff940198af40dac2b0b85.jpeg autofit.png

这是一款可以使你的项目一键自适应的工具 github源码👉go[4]

  • 从npm下载

css
复制代码
npm i autofit.js
  • 引入

import autofit from 'autofit.js'
  • 快速开始

autofit.init()

默认参数为1920*929(即去掉浏览器头的1080), 直接在大屏启动时调用即可

  • 使用

// App.vue 需要在renderDom挂载到dom之后,才可以生效
export default {  
  mounted() {
  autofit.init({
        designHeight: 1080,
        designWidth: 1920,
        renderDom:"#app",
        resize: true
    })
  },
}

以上使用的是默认参数,可根据实际情况调整,参数分别为

  • renderDom(可选):渲染的dom,默认是 "#app",必须使用id选择器

  • designWidth(可选):设计稿的宽度,默认是 1920

  • designHeight(可选):设计稿的高度,默认是 929 ,如果项目以全屏展示,则可以设置为1080

  • resize(可选):是否监听resize事件,默认是 true

结语

诺克萨斯即将崛

参考资料

[1]

https://juejin.cn/post/7231089453694009404: https://juejin.cn/post/7231089453694009404

[2]

https://farm.sino-eco.com/website/bingchonghai/: https://link.juejin.cn?target=https%3A%2F%2Ffarm.sino-eco.com%2Fwebsite%2Fbingchonghai%2F

[3]

https://www.npmjs.com/package/autofit.js: https://link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fautofit.js

[4]

https://github.com/995231030/autofit.js: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2F995231030%2Fautofit.js

 
 

Node 社群

我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

09cc08e8fc808fb1391250afdca30618.png

“分享、点赞、在看” 支持一下
  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值