[JavaScript知识库]【前端自适应布局】

在开发过程中，分辨率不同时，设计的大屏展示效果不同，为了保持页面不形变，这里采用的是对横纵进行等比例缩放

代码示例

<template>
  <div
      class="ScreenAdapter"
      style="overflow-x: hidden;overflow-y: hidden;"
      :style="screenStyle"
  >
    <slot />
  </div>
</template>
<script>
export default {
  name: '',
  //参数注入
  props: {
    width: {
      type: String,
      default: '1920'
    },
    height: {
      type: String,
      default: '1080'
    }
  },
  computed:{
    screenStyle(){
      return{
        "width": (this.width - this.originalWidthReduce) + 'px',
        "height": (this.height - this.heightReduce) + 'px',
        "transform": `scale(${this.scale})`
      }
    },
    widthReduce(){
      return this.shrink?80:240
    },
    heightReduce(){
      return 117;
    },
  },
  data() {
    return {
      scale:1,
      shrink: false,
      originalWidthReduce:240,
      // heightReduce: 117
    }
  },
  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)
      }
    },
    // 获取放大缩小比例
    setScale() {
      let currWidth = window.innerWidth;
      this.shrink = currWidth <= 1200;

      const w = (window.innerWidth - this.widthReduce) / (this.width - this.originalWidthReduce)
      const h = (window.innerHeight - this.heightReduce) / (this.height - this.heightReduce)

      this.scale = w < h ? w : h
    },
    // 设置比例
  },
  mounted() {
    this.setScale()
    window.onresize = this.Debounce(this.setScale, 1000)
  },
}
</script>
<style lang="less" scoped>
.ScreenAdapter {
  transform-origin: 0 0;
  position: absolute;
  transition: 0.3s;
}
</style>