数据大屏适配-vfit

作者说是专为 Vue 3 设计的轻量方案，不仅提供全局缩放，更通过组件化思想解决精细定位问题，是"缩放+定位"的一体化方案。用了一下感觉还不错。

官网地址：web-vfit.netlify.app

使用方法还是挺简单的：

初始化

import { createFitScale } from 'vfit'
import 'vfit/style.css'

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

<template>
  <div class="content">
    <Header />
    <router-view></router-view>
  </div>
</template>

<style lang="less">
.content {
  width: 100%;
  height: 100vh;
  background: url(@/assets/images/bg.png) no-repeat;
  background-size: 100% 100%;
}
</style>

外层容器需设置定位属性：position: relative（推荐）或 absolute。内容模块需要用FitContainer包裹。

<template>
    <div class="viewport">
        <FitContainer :top="16" :left="16" unit="px">
            <div class="box">
               内容
            </div>
        </FitContainer>
    </div>
</template>

<style lang="less" scoped>
.viewport {
    position: relative;
    width: 100%;
    height: calc(100vh - 60px);

    .box {
        width: 640px;
        height: 300px;
        color: #fff;
        font-size: 26px;
        background-color: #fff;
    }
}
</style>