vue工程可视化大屏 自适应问题

目录

三大常用方式

vw/vh方案

scale方案

rem + vw vh方案

最新方式,调用autofit.js包:


vue工程可视化大屏 自适应问题

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

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

你可能感兴趣的:(CSS样式,vue.js,前端,javascript)