vue + elementPlus大屏项目使用autofit做适配及注意点

下载及使用

复制代码

npm i autofit.js

main中使用

复制代码

autofit.init({
  designWidth: 1920, // 设计稿宽度
  designHeight: 1080, // 设计稿高度
  renderDom:"#app", // 缩放根元素
  ignore: ['#unity-iframe', 'div[id*="el-popper-container"]'], // 忽略元素
  resize: true
})

问题1：el-dialog打开时导致页面变小

原因：

Element Plus 的 el-dialog 组件在打开时，会自动给 body 添加一个内联样式 来防止背景滚动，通常表现为 overflow: hidden 配合 width 调整来防止页面抖动。

当 autofit 对整个页面进行 transform: scale 缩放后，Element Plus 计算滚动条宽度时出现偏差，错误地添加了 width: calc(100% - 6px) 样式。

解决方案：

:append-to-body="false"：防止 Dialog 脱离 autofit 缩放容器
:lock-scroll="false"：禁用 Element Plus 自动添加 body 样式

问题2：el-dialog位置偏移

原因：弹框打开时，弹框样式如下，这里的6vh是相对于浏览器窗口高度计算的，autofit后页面内容高度不等于视口高度了，导致位置错位。

复制代码

/* Element Plus 默认样式 */
.el-dialog:not(.is-fullscreen) {
  margin-top: 6vh !important;
}

解决方案：flex 居中 + 覆盖样式

css 复制代码

/* 全局样式 - 修复 Dialog 位置 */
.el-overlay .el-overlay-dialog {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box;
}

.el-dialog:not(.is-fullscreen) {
  margin: 0 !important;
  max-height: calc(100vh - 40px);
  display: flex !important;
  flex-direction: column;
}

/* 弹窗内容滚动 */
.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
  max-height: calc(100vh - 140px);
}

/* 可选：全屏弹窗样式 */
.el-dialog.is-fullscreen {
  margin: 0 !important;
  border-radius: 0;
}

问题3：el-menu错位及子菜单层级被降低

原因：下拉菜单默认通过 teleport 挂载到 body。当 body 被 autofit.js 添加 transform: scale() 后，会创建一个新的 CSS 层叠上下文（stacking context），导致：

层级计算错误 ：缩放后的元素与 body 上的弹出层无法正确比较 z-index
定位偏移：坐标计算也因缩放产生偏差

解决方案：

1.在初始化autofit时忽略弹出层 ignore: $'#unity-iframe', 'div\[id\*="el-popper-container"$ '],解决位置偏移

2.添加以下全局样式兜底 CSS：确保所有弹出层层级正确

css 复制代码

[id^="el-popper-container-"] {
  position: relative !important;
  z-index: 9999 !important;
}