前端可视化大屏自适应终极解决方案autofit.js

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

可视化大屏的适配是一个老生常谈的话题了，现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢？因为目前市面上适配工具每一个都无法做到完美的效果，做出来的东西都差不多，最终实现效果都逃不出白边的手掌心，可以解决白边问题的，要么太过于复杂，要么会影响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. 缺点：留白，有时图表需要单独适配字体

autofit.js初代核心代码

function keepFit(designWidth, designHeight, renderDom) {
  let clientHeight = document.documentElement.clientHeight;
  let clientWidth = document.documentElement.clientWidth;
  let scale = 1;
  if (clientWidth / clientHeight  
这是一款可以使你的项目一键自适应的工具 github源码go
 

• 从npm下载

  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

        解决问题

        使用了autofit.js依然出现了白边

        因为autofit.js使用的是scale方案，transform: scale() 缩放时，dom元素在文档中的实际占位是不变

        这样下方就出现了白边，右侧还出现了滚动条

        解决此问题将body设置超出隐藏即可：

        1 2 在设置超出隐藏后，滚动条和白边都不见了。 （图片来源网络，侵删） #app充满了全屏，里面的元素却不能自适应位置。 出现这种问题的原因很明显，你需要将内容元素做一个简单的适配定位，因为autofit.js只做了缩放和填充部分。如果你的页面元素没有做均匀分布的位置，也是会出现这种情况的。 以上图为例 如果出现了这个问题，推荐使用flex进行布局即可。 1 2 display:flex; justify-content: space-between; 或者直接使用定位，将三块内容定位到左上、中间、右上。 1 2 3 4 5 6 7 8 .left, .right {     position: fixed;     width: 25%;     height: 100%;     top: 0;     padding-top: 70px;     z-index: 9999; } 手动缩放浏览器窗口时，echarts图表被拉伸了 这个问题按说不会是因为autofit.js引起的（前提是你没有使用百分比），但是既然有人提到了，这里说一下解决办法。 echarts图表拉伸，说明你的echarts外层容器变大或者变小的，导致canvas元素拉伸了，解决办法为： 1 2 3 4 5 6 window.addEventListener('resize', this.redraw, false);    redraw() {       this.myChart.clear();       this.myChart.resize();       this.draw(); }, 像我这样，监听resize事件，并重绘echarts即可。 手动缩放浏览器可以正常适应，点击最大化（或F11全屏）时却失效了 这个问题属于autofit.js的一个bug，目前在最新版本已经修复了。 造成Bug的代码 1 2 3 4 5 6 7 if (clientWidth / clientHeight   scale = (clientWidth / designWidth)   document.querySelector(renderDom).style.height = `${clientHeight / scale}px`; } else {   scale = (clientHeight / designHeight)   document.querySelector(renderDom).style.width = `${clientWidth / scale}px`; } 造成这个bug的原因是，全屏时的宽高比不小于（因为是等于）设计图宽高比，导致高度没有被重新设置。 所以在曾经设置过高度（即基于宽度px不变的缩放），再最大化的情况，高度不会变。在这种逻辑下，宽度有时也会失效。 修改后的代码（1.0.8）： 1 2 3 4 let scale = (clientWidth / clientHeight dom.style.height = `${clientHeight / scale}px`; dom.style.width = `${clientWidth / scale}px`; dom.style.transform = `scale(${scale})`; 这样无论是怎样的宽高比，它都会同时设置宽度和高度。 使用autofit.js后，在小屏幕上字体（或元素）变得过小 造成这种问题的原因大概率是你同时使用了其他自适应工具，或者使用了相对单位，导致你的网站进行了双重适配。 解决方式也很简单，autofit.js不需要任何其他辅助工具，如果想体验autofit.js一行搞定，关闭其他插件，且不要使用任何相对单位即可！ autofit.js仅推荐使用px进行开发。 使用autofit.js后，地图事件热区偏移了 不要手动设置：transform-origin，因为autofit.js将它设置成了 0 0，即以左上角为基准点缩放，这可以保证dom元素不会偏移。 如果你使用的地图是基于canvas绘制的，那么有可能会出现偏移现象（往往伴随着拉伸），那么和上面的echarts的解决方式一样，只需要重绘就可以了。 如果是基于svg绘制的，那么不应该会出现这个问题。 原生项目或jquery项目引入方式 将准备好的包放在项目中，常规引入方式 需要修改autoofit.js文件，将//export { elRectification }; //export default autofit;注释掉，不然报错，当然如果你项目支持import方式可以不用注释掉； 在你的项目js中使用autofit.init()同上  相关阅读： 1、Android Studio音乐播放器（使用sqlite创建数据库） 2、Windows下载安装配置并使用Redis（保姆级教程） 3、【菜狗学前端】在原生微信小程序使用腾讯地图API接口 4、开源 复刻GPT-4o - Moshi；自动定位和解决软件开发中的问题；ComfyUI中使用MimicMotion；自动生成React前端代码 5、后端接口返回文件流，前端下载（java+vue） 免责声明 本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。 文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。 相关阅读 怎么帮人在网上异地备案(怎么帮人在网上异地备案社保) 2024-07-081811 人在看 怎么把网页弄上域名(怎么把网址添加到网页上方) 2024-07-071227 人在看 【Java】内部类 2024-07-071264 人在看 已解决javax.xml.datatype.DatatypeConfigurationException异常的正确解决方法，亲测有效！！！ 2024-07-071465 人在看 发表评论取消回复 快捷回复： 表情： 评论列表 （暂无评论，人围观） 还没有评论，来说两句吧... 目录[+]