useScreenAdaptation: Vue3 Screen Adaptation Tool

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.

Installation and Import

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

Usage

<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>