拒绝 rem 计算！Vue3 大屏适配，我是这样做的 (vfit 使用体验)

最近公司又接了个数据可视化大屏的需求，设计稿是标准的 1920 x 1080。拿到设计稿的那一刻，我的内心是拒绝的... 🤯

大家都知道，做大屏适配最烦的就是还原设计稿坐标。以前我尝试过各种方案：

rem / vw: 每一个 px 都要转换，写 css 的时候旁边还得开个计算器，太累。
百分比: 更是噩梦，稍微动一下布局就乱了。
手动 scale : 虽然好用，但要自己写 resize 监听，处理防抖，还要算居中偏移，很容易出 bug（比如留白不对、点击错位）。

这次我想偷个懒，在 GitHub 上翻了一圈，发现了一个基于 Vue 3 的超轻量适配库 ------ vfit 。用完之后我只想说：真香！原来适配大屏可以像写普通页面一样简单。

这里分享一下我的使用过程，希望能帮到同样在"搬砖"的兄弟们。

🛠 3分钟上手实录

1. 安装

首先安装库，包很小，没什么乱七八糟的依赖。

bash 复制代码

npm install vfit

2. "傻瓜式"配置

在 main.ts 里注册一下。这里最爽的是，可以直接填设计稿的宽高。我的设计稿是 1920x1080，我就直接填进去，根本不用换算。

typescript 复制代码

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createFitScale } from 'vfit'
import 'vfit/style.css' // ⚠️ 划重点：一定要引入这个样式，不然布局组件会失效

const app = createApp(App)

app.use(createFitScale({
  target: '#app',        // 告诉它要在哪个容器搞事情
  designWidth: 1920,     // 设计稿宽
  designHeight: 1080,    // 设计稿高
  scaleMode: 'auto'      // 默认 auto 就能应付绝大多数情况
}))

app.mount('#app')

这就完事了？对，这就完事了。这时候你的页面已经具备了自动缩放的能力，无论怎么拖拽浏览器窗口，内容都会保持比例并自动居中。

✨ 我最爱的功能：FitContainer

配置好 scale 只是第一步，真正的痛点是组件定位。以前用 scale 方案，子元素定位还是得小心翼翼。

vfit 提供了一个叫 <FitContainer> 的组件，这个简直是"偷懒神器"。 它可以直接接收设计稿上的 px 坐标！

举个栗子 🌰

假设设计稿上：

标题：距离顶部 50px，水平居中。
左侧图表：距离左边 30px，顶部 100px。
右侧列表：死死贴住右边框，距离右边 30px。

用 vfit 写代码是这样的：

html 复制代码

<template>
  <div class="screen-wrapper">
    
    <!-- 标题：居中咱们还是用 flex 方便，或者也可以算 left -->
    <FitContainer :top="50" :left="0" :right="0">
      <h1 style="text-align: center">我的酷炫大屏</h1>
    </FitContainer>

    <!-- 左侧图表：直接写设计稿坐标 -->
    <FitContainer :top="100" :left="30" :z="10">
      <ChartComponent />
    </FitContainer>

    <!-- 右侧列表：注意这里！支持 right 定位 -->
    <FitContainer :top="100" :right="30">
      <ListComponent />
    </FitContainer>

  </div>
</template>

发现没？我完全不需要思考缩放比例！

设计稿标 30px，我就写 30。
插件内部会自动根据当前的缩放倍率，帮我计算好实际的位置。
不管是 4K 屏还是笔记本小屏幕，位置看起来都和设计稿一模一样。

🤔 踩坑小贴士

在使用过程中也发现了一些需要注意的小细节，分享给大家避坑：

样式引入不能忘 ：第一次用的时候忘了 import 'vfit/style.css'，结果 <FitContainer> 变成普通 div 了，排版全乱。大家千万别忘了。
z-index 层级 ： <FitContainer> 默认有个 z-index: 300（大概是为了防止被背景盖住）。如果你的弹窗被遮住了，记得给组件传个更大的 :z="999"。
Right/Bottom 的特殊逻辑 ：我看了一下源码发现，如果你用 :left，它会根据缩放比例位移（保持相对设计稿位置）。但如果你用 :right，它是不乘缩放比例 的。 这其实很科学 ：因为大屏通常是居中显示的，如果右侧元素也按比例缩放距离，在宽屏下可能会离屏幕边缘太远。现在的逻辑能保证它始终吸附在屏幕边缘，视觉效果更好。

总结

如果你也在做 Vue 3 的大屏项目，真心推荐试一下 vfit。它不是功能最强大的，但绝对是最省心 的。把精力花在画 ECharts 上，而不是在那算 rem 或者调 css 布局，这才是程序员该干的事嘛！😂

项目地址 ： 🔗 Github: https://github.com/v-plugin/vfit 🔗 文档: https://web-vfit.netlify.app

祝大家的大屏项目都能一次过稿！🍻