Getting Started

Installation

npm i vfit

Initialization

// main.ts
import { createFitScale } from 'vfit'
import 'vfit/style.css' // Must import styles

app.use(createFitScale({ target: '#app', designHeight: 1080, designWidth: 1920, scaleMode: 'auto' }))

Important

You must import the styles in your entry file: import 'vfit/style.css', otherwise component styles will be missing.

Your First Container

We recommend using Dedicated Positioning Components (like vfit-lt) for quick layout, as they are more concise and easier to maintain.

<template>
  <div class="viewport">
    <!-- Top-left corner, 90px from top/left -->
    <vfit-lt :top="90" :left="90">
      <div class="box">Content</div>
    </vfit-lt>
  </div>
</template>

<style scoped>
.viewport { position: relative; width: 100%; height: 100vh; }
.box { width: 120px; height: 80px; }
</style>

If you need compatibility with old code or complex positioning, you can also use the FitContainer general component.

Key Points

• The parent container must set positioning properties: position: relative (recommended) or absolute
• Two coordinate units:
  • %: Position does not change with scaling, suitable for centering/relative positioning
  • px: All four sides (top/left/right/bottom) scale with the global scale value, suitable for fixed pixel layout

Next Steps

• FitContainer Component — use when all four sides are needed or for backward compatibility
• Positioning & Origin — deep dive into pixel/percent modes and automatic transform-origin detection
• Scale Modes — learn when to use height, width, or auto
• API Reference — complete parameter documentation