vue3/vue2大屏适配

vue3-scale-box 和 vue2-scale-box 可以帮助你在不同 Vue 版本中实现大屏自适应缩放。vue3-scale-box - npmvue3 scale box. Latest version: 0.1.9, last published: 2 years ago. Start using vue3-scale-box in your project by running `npm i vue3-scale-box`. There is 1 other project in the npm registry using vue3-scale-box.https://www.npmjs.com/package/vue3-scale-box

1. vue3-scale-box（Vue 3 专用）

功能

• 基于 Vue 3 开发，支持 Composition API 和 

  配置参数

  参数	类型	默认值	说明
  width	Number	1920	设计稿宽度
  height	Number	1080	设计稿高度
  scaleMode	'fit' | 'full'	'fit'	fit（等比缩放）/ full（全屏拉伸）
  delay	Number	100	窗口调整防抖延迟（ms）

  ---

  2. vue2-scale-box（Vue 2 专用）

  功能

  • 专为 Vue 2 设计，兼容 Options API。

  • 类似 vue3-scale-box，支持大屏等比缩放。

  安装

  npm install vue2-scale-box
  # 或
  yarn add vue2-scale-box

  使用示例

  配置参数

  参数	类型	默认值	说明
  width	Number	1920	设计稿宽度
  height	Number	1080	设计稿高度
  mode	'fit' | 'full'	'fit'	fit（等比缩放）/ full（全屏拉伸）

  ---

  3. 关键区别

  特性	vue3-scale-box	vue2-scale-box
  Vue 版本	Vue 3	Vue 2
  API 支持	Composition API	Options API
  打包方式	Vite/Rollup	Webpack
  事件监听	@scale 事件	@resize 事件

  ---

  4. 常见问题

  Q1：内容被拉伸或变形？

  • 确保 scaleMode="fit"（等比缩放）。

  • 检查内部元素是否使用 % 或 vw/vh 单位。

  Q2：缩放不生效？

  • 确认父容器有明确的 width 和 height（不能是 auto）。

  • 检查是否在 mounted 后动态加载内容（可能需要手动触发 resize）。

  Q3：如何兼容移动端？

  • 结合媒体查询调整 width/height：

    const isMobile = window.innerWidth < 768;
    

  5. 总结

  • Vue 3 项目 → 用 vue3-scale-box（推荐 Vite 构建）。

  • Vue 2 项目 → 用 vue2-scale-box（配合 Webpack）。

  • 核心逻辑：通过 transform: scale() 实现等比缩放，监听 resize 事件动态调整。

  如果需要更复杂的适配（如部分内容不缩放），可以结合 CSS transform-origin 或手动计算比例。