前端大屏可视化适配方案（通用模板，快速上手）

在日常前端开发中，大屏项目是每个前端开发者必备技能，但是目前设备尺寸大小和分辨率都不相同，所以大屏适配成了一个头疼的问题。看到网上的实现方案有rem，flexible，zoom，百分比，总感觉没那么完美，于是自己研究了一下也借鉴了网上大神的方法，实现了一下这三种大屏适配方案，在实际开发中可以借鉴使用

第一种：使用css属性scale缩放来适配（简单，易上手）

gitee地址：大屏可视化模板: 大屏可视化模板。利用scale来分辨率适配

 我把关键代码封装成了组件，使用的时候直接套在大屏页面就可以实现

第二种：固定缩放比

gitee地址：大屏可视化模板固定尺寸: 大屏可视化模板固定尺寸

关键代码：

export const fitScreen = () => {
  const body = document.documentElement
  const bodyWidth = body.clientWidth
  const bodyHeight = body.clientHeight
  const realRatio = bodyWidth / bodyHeight
  const designRatio = 16 / 9
  const scaleRate = realRatio > designRatio ? bodyHeight / 1080 : bodyWidth / 1920

  const app:any= document.querySelector('.bigScreen')

  app &&
    (app.style.transformOrigin = 'left top') &&
    (app.style.transform = `scale(${scaleRate}) translateX(-50%)`) &&
    (app.style.width = `${bodyWidth / scaleRate}px`)
}

第三种：缩放+铺满全屏+百分比

 gitee地址：大屏可视化自动拉伸模板: 大屏可视化自动拉升模板

 关键代码：

以上就是我总结的大屏可视化屏幕适配方案，有好的想法可以和我交流，一起进步！！！