前端可视化大屏适配方案

小鱼儿 2023-09-28 16:18 6阅读 0赞

--------------------

**目录**

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

2.可用技术

3.使用

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

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

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

局限性：

--------------------

### 效果图： ###

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

![9c16182bd7f9478f81866f4f996d34f5.png][]

--------------------

### 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：于近期。

[9c16182bd7f9478f81866f4f996d34f5.png]: https://img-blog.csdnimg.cn/9c16182bd7f9478f81866f4f996d34f5.png