此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应。
首先下载lodash插件。
npm i lodash -S
然后在App.vue中导入,此处的App.vue主要指的是主框架,因不同项目可自行选择。
import _ from 'lodash'
然后给app容器挂上ref=“app”
<template>
<a-config-provider :locale="locale">
<div id="app" ref="app">
<router-view />
</div>
</a-config-provider>
</template>
然后在mounted使用如下方法(其中的1080以及1920为定义的画布尺寸):
mounted () {
this.$nextTick(() => {
const $app = this.$refs.app
const standardScale = 1080 / 1920
window.addEventListener(
'resize',
_.debounce(function () {
const docHeight = document.body.clientHeight
const docWidth = document.body.clientWidth
if (docWidth < 1680) {
const curre