vue 项目适配

vue 项目适配

使用px单位未做适配的项目改造方案

以1920*1080设计图为例：

核心是根据页面的宽度除以1920，然后设置body的zoom属性

 mounted () {
    this.bodyScale()
  },
 
//method中
bodyScale () {
   //获取当前分辨率下的可是区域宽度
  var devicewidth = document.documentElement.clientWidth
  var scale = devicewidth / 1920 // 分母——设计稿的尺寸
  document.body.style.zoom = scale//放大缩小相应倍数
}

对于大屏可视化适配方案

主要是横向和纵向不要有滚动条

• 新建工具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文件(页面最外层的标签)写入以下代码

app.vue

<template>
	<div id="app" ref="appRef">
		<router-view />
	</div>
</template>

<script>
import drawMixin from "@/utils/drawMixin"
export default {
    mixins: [drawMixin],
	data() {
		return {};
	},
	created() {
	
	},
};
</script>

<style>
// 这一步很重要，具体标签名根据自己项目来，就是页面居中，脱离文档流，加一个溢出隐藏，就不会出现滚动条了。
#app {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}
</style>