在vue项目中实现网页整体随屏幕尺寸缩放
此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应。首先下载lodash插件。npm i lodash -S然后在App.vue中导入,此处的App.vue主要指的是主框架,因不同项目可自行选择。import _ from 'lodash'然后给app容器挂上ref=“app”<template><a-conf
·
此处的项目为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 currentScale = docHeight / docWidth
let [scale, translate] = [0, 0]
if (currentScale < standardScale) {
// 以高度计算
scale = docHeight / 1080
const shouleWidth = 1920 * scale
const offsetWidth = docWidth - shouleWidth
translate = offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : ''
} else {
// 以宽度计算
scale = docWidth / 1920
const shouleHeight = 1080 * scale
const offsetHeight = docHeight - shouleHeight
translate = offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : ''
}
console.log(translate)
$app.style.cssText = `
transform: scale(${scale}) ${translate};
transform-origin: top left;
min-width: 1920px;
min-height: 1080px;
`
} else {
$app.style.cssText = ''
}
}),
200
)
if (document.createEvent) {
var event = document.createEvent('HTMLEvents')
event.initEvent('resize', true, true)
window.dispatchEvent(event)
} else if (document.createEventObject) {
window.fireEvent('onresize')
}
})
},
如果有更好的方法,可以评论区留言,交流学习~
更多推荐
已为社区贡献2条内容
所有评论(0)