import { ref } from 'vue'
export default function windowResize() {
// * 指向最外层容器
const screenRef = ref()
// * 定时函数
const timer = ref(0)
// * 默认缩放值
const scale = {
width: '1',
height: '1'
}
// * 设计稿尺寸(px)
const baseWidth = 1920
const baseHeight = 1080
// * 需保持的比例(默认1.77778)
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
const calcRate = () => {
// 当前宽高比
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
if (screenRef.value) {
if (currentRate > baseProportion) {
// 表示更宽
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
scale.height = (window.innerHeight / baseHeight).toFixed(5)
screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`
} else {
// 表示更高
scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5)
scale.width = (window.innerWidth / baseWidth).toFixed(5)
screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`
}
}
}
const resize = () => {
clearTimeout(timer.value)
timer.value = window.setTimeout(() => {
calcRate()
}, 200)
}
// 改变窗口大小重新绘制
const windowDraw = () => {
window.addEventListener('resize', resize)
}
// 改变窗口大小重新绘制
const unWindowDraw = () => {
window.removeEventListener('resize', resize)
}
return {
screenRef,
calcRate,
windowDraw,
unWindowDraw
}
}
门户大屏类网站适配scale缩放方式
最新推荐文章于 2024-07-20 23:54:17 发布