前端可视化大屏适配方案记录

概要

前端可视化大屏适配方案记录

例如：

1. 整体页面的适配主要是运用到flex布局，整个大屏页面将头部标题部分去掉，那剩下的内容区，以设计图为准，分模块，以1902 * 1080为例，分为左中右，
   左边样式占

left { height:100%; flex-grow:2; padding-left:10px;}

中间样式占

middle { height:100%; flex-grow:3; padding-left:10px; padding-right:10px; }

右边样式占

.right { height:100%; flex-grow:2;padding-right:10px; }

2. 大屏字体适配
   建立一个js文件，复制一下代码

(function flexible (window, document) {
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1
   
    // adjust body font size
    function setBodyFontSize () {
      if (document.body) {
        document.body.style.fontSize = (12 * dpr) + 'px'
      }
      else {
        document.addEventListener('DOMContentLoaded', setBodyFontSize)
      }
    }
    setBodyFontSize();
   
    // set 1rem = viewWidth / 10
    function setRemUnit () {
      var rem = docEl.clientWidth / 10
      docEl.style.fontSize = rem + 'px'
    }
   
    setRemUnit()
   
    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
      if (e.persisted) {
        setRemUnit()
      }
    })
   
    // detect 0.5px supports
    if (dpr >= 2) {
      var fakeBody = document.createElement('body')
      var testElement = document.createElement('div')
      testElement.style.border = '.5px solid transparent'
      fakeBody.appendChild(testElement)
      docEl.appendChild(fakeBody)
      if (testElement.offsetHeight === 1) {
        docEl.classList.add('hairlines')
      }
      docEl.removeChild(fakeBody)
    }
  }(window, document))

在首页引入上面所建的js路径：

import '@/utils/fontSize'

在vscode中px2rem插件，就可以使用rem单位来适配页面

整体架构流程

提示：这里可以添加技术整体架构

例如：
在语言模型中，编码器和解码器都是由一个个的 Transformer 组件拼接在一起形成的。

技术名词解释

提示：这里可以添加技术名词解释

例如：

• Bert
• GPT 初代
• GPT-2
• GPT-3
• ChatGPT

技术细节

提示：这里可以添加技术细节

例如：

• API
• 支持模型类型

小结

提示：这里可以添加总结

例如：

提供先进的推理，复杂的指令，更多的创造力。