Vue 3: 如何利用缩放进行屏幕分辨率适配的解决方案

在前端开发中，实现响应式布局是确保用户界面在各种设备上表现一致的关键。本文将详细解析一个 Vue 3 组件的实现，这个组件根据设计宽度自动缩放，并调整其高度以适应窗口的变化。

组件实现概述

本文将介绍一个 Vue 3 组件，可以在浏览器窗口大小发生变化时自动调整其缩放比例和高度。这个组件的核心目标是使组件的内容在不同设备上看起来一致，无论设备的屏幕大小如何变化。

组件的核心功能

设计宽度的定义：组件的设计宽度被设定为 1920 像素，可以根据UI图的设计尺寸自行修改。

缩放计算：根据浏览器的实际宽度与设计宽度之间的比率，动态计算缩放比例。这个缩放比例会用于调整组件的显示效果，以适应不同屏幕宽度。

动态高度调整：除了缩放，组件的高度也需要根据浏览器的高度动态调整，以保持内容的正确显示。

组件代码解析

下面是实现这个功能的 Vue 3 组件代码：

<code><script setup lang="ts">code>

import { ref, onMounted, onUnmounted } from 'vue';

// 设定设计宽度

const designWidthValue = 1920;

const designWidth = ref(`${ designWidthValue}px`);

const zoom = ref(window.innerWidth / designWidthValue);

const containerHeight = ref(`${ window.innerHeight / zoom.value}px`);

const scale = ref(`scale(${ zoom.value})`);

const props = defineProps(['containerClass']);

// 更新尺寸的函数

function updateSize() {

zoom.value = (window.innerWidth / designWidthValue).toFixed(3);

scale.value = `scale(${ zoom.value})`;

containerHeight.value = `${ window.innerHeight / zoom.value}px`;

}

// 组件挂载时，添加窗口大小变化的事件监听

onMounted(() => {

window.addEventListener('resize', updateSize);

updateSize();

});

// 组件卸载时，移除事件监听

onUnmounted(() => {

window.removeEventListener('resize', updateSize);

});

</script>

<template>

<div

:class="props.containerClass"code>

:style="{

width: designWidth,

height: containerHeight,

overflow: 'hidden',

transform: scale,

transformOrigin: 'left top'

}"code>

>

<slot></slot>

</div>

</template>

<style scoped lang="scss">code>

</style>

代码解释