前端可视化大屏适配方案

---

目录

 1.大屏适配的要求（普遍）

 2.可用技术

 3.使用

第一步， src目录下utils文件下新建drawMixin.js文件，将以下代码粘贴进去

第二步，在根组件如app.vue或index.vue文件(页面最外层的标签)写入以下代码

 第三步，设置根标签的样式

局限性：

---

效果图：

浏览器25%下全屏视角，横向、纵向无滚动条，在25%~500%下页面是一样的。

---

 

1.大屏适配的要求（普遍）

第一点，横向、纵向不可出现滚动条

第二点，可全屏（就是F11全屏模式）

第三点，不论在多大的屏幕中显示，页面不可变形，最好是肉眼看不出任何问题

---

2.可用技术

1.强推css3的 scale进行适配，原理其实很简单，就是我们假设按照1920×1080的设计图正常使用px单位去写页面，然后当页面变化时，使用scale动态的放大或者缩小

2.rem适配，没啥好说的，用淘宝的那个即可

3.flex适配

4.百分比适配 

---

3.使用

使用其实很简单，共分三步

---

第一步， src目录下utils文件下新建drawMixin.js文件，将以下代码粘贴进去

// 屏幕适配 mixin 函数

// * 默认缩放值
const scale = {
  width: '1',
  height: '1',
}

// * 设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080

// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))

export default {
  data() {
    return {
      // * 定时函数
      drawTiming: null
    }
  },
  mounted () {
    this.calcRate()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    calcRate () {
      const appRef = this.$refs["appRef"]
      if (!appRef) return 
      // 当前宽高比
      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
      if (appRef) {
        if (currentRate > baseProportion) {
          // 表示更宽
          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
          scale.height = (window.innerHeight / baseHeight).toFixed(5)
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        } else {
          // 表示更高
          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
          scale.width = (window.innerWidth / baseWidth).toFixed(5)
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        }
      }
    },
    resize () {
      clearTimeout(this.drawTiming)
      this.drawTiming = setTimeout(() => {
        this.calcRate()
      }, 200)
    }
  },
}

---

第二步，在根组件如app.vue或index.vue文件(页面最外层的标签)写入以下代码

 我用的是mixin混入，如果不想这么搞，可以按部就班的把drawMixin.js里面的数据放在该放的位置上即可

<div id="index" ref="appRef"> //加一个ref

import drawMixin from "../utils/drawMixin"

export default {
  mixins: [drawMixin],
  data () {
    return {
     
    }
  }}

---

 第三步，设置根标签的样式

这一步很重要，具体标签名根据自己项目来，就是页面居中，脱离文档流，加一个溢出隐藏，就不会出现滚动条了。

#app {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
    }

---

局限性：

scale非常适合可视化，我想着能不能用于正常的pc端页面呢？我做了几个实验，有rem适配的不适合，用px写的普通项目到也行，可是有一个非常难以解决的问题，那就是滚动条，除了可视化项目，普通的项目可是有滚动条的，将这个方法应用后，直接炸了。

这个PC端页面适配问题一直困扰着我，后续我会写一篇总结文章。

ps：于近期。