web端大屏适配解决方案

描述; 引用第三方脚本;通过在main.js中写代码计算;使用rem进行继承,实现适配。

坑点; 原理跟上述方法1是一样的;同样无法实现大屏适配;坑点不在赘述。

解决思路

山重水复疑无路;柳暗花明又一村

当自己没有好的方法时;我们不妨借助下’巨人肩膀’的力量。本人找了下百度、网易等大数据适配的解决方案。通过线上案例发现如下所示规律;下方是我摘取的网易有数截图;;


逻辑分析;

上图案例中采用了css3的缩放transform: scale(X)属性;对比两个图;我们不难发现本人改变分辨率时;scale的值是变化的。前端小伙们们看到这;想必也已经明白了大概。
我们只要监听浏览器窗口大的小;同时控制变化的比例就可以了。

1. 封装一个全局组件

以vue 为主;直接粘贴本人编写的代码如下;该公共组件为了下文中方便描述;命名为ScreenAdapter

<template>
  <div
    class=;ScreenAdapter;
    :style=;style;
  >
    <slot />
  </div>
</template>
<script>
export default {
  name: ;;,
  //参数注入
  props: {
    width: {
      type: String,
      default: ;1920; 
    },
    height: {
      type: String,
      default: ;1080; 
    }
  },
  data() {
    return {
      style: {
        width: this.width ; ;px;,
        height: this.height ; ;px;,
        transform: ;scale(1) translate(-50%, -50%);
      }
    }
  },
  mounted() {
    this.setScale()
    window.onresize = this.Debounce(this.setScale, 1000)
  },
  methods: {
    Debounce: (fn, t) => {
      const delay = t || 500
      let timer
      return function() {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    // 获取放大缩小比例
    getScale() {
      const w = window.innerWidth / this.width
      const h = window.innerHeight / this.height
      return w < h ? w : h
    },
    // 设置比例
    setScale() {
      this.style.transform = ;scale(; ; this.getScale() ; ;) translate(-50%, -50%);
      console.log(;任你千变万化,我都不会影响性能;)
    }
  }
}
</script>
<style lang=;scss; scoped>
.ScreenAdapter {
  transform-origin: 0 0;
  position: absolute;
  left: 50%
  top: 50%
  transition: 0.3s;
  background: red;
}
</style>

<ScreenAdapter> <div>大家好;我是大屏展示页面</div> </ScreenAdapter>