@hemingway_at/vue-screen-adaptation
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

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>

Package Sidebar

Install

npm i @hemingway_at/vue-screen-adaptation

Weekly Downloads

2

Version

2.0.0

License

MIT

Unpacked Size

11 kB

Total Files

6

Last publish

Collaborators

  • hemingway_at