useScreenAdaptation
is a screen adaptation tool for Vue3 projects that automatically adjusts the size and scaling of your application container and its content based on specified design dimensions and offset ratios, ensuring optimal layout across various screen resolutions.
First, ensure your project has Vue3 and the @vueuse/core library installed. If not, run the following commands:
npm install vue@next @vueuse/core
# or using yarn
yarn add vue@next @vueuse/core
<script setup lang="ts">
import useScreenAdaptation from '@hemingway_at/vue-screen-adaptation'
const { el } = useScreenAdaptation({
designWidth: 1920,
designHeight: 1080,
widthOffsetRatio: 0.3,
heightOffsetRatio: 0.1,
isProduction: import.meta.env.PROD)
}
</script>
<template>
<div class="container" ref="el">
<div
class="layout"
>
<!-- Place your application content here -->
</div>
</div>
</template>