直接改 font-size 会导致导航栏抖动，因其触发重排使文字盒尺寸变化、相邻元素位移；用 transform: scale() 可避免此问题，它仅作用于视觉层且不改变文档流。
为什么直接改 font-size 会导致导航栏抖动
因为 font-size 是布局属性，一变，文字盒尺寸就跟着变，浏览器必须重排（reflow）整个行内流——相邻 li 或父容器高度可能被撑开，下方内容“往下跳”。尤其在 display: flex 或 inline-block 布局里，这种偏移肉眼可见。
用 transform: scale() 替代 font-size 的实操写法
只改视觉层，不碰文档流，放大时其他元素完全不动。关键三步：
- 给导航链接加
transform: scale(1.1)（推荐 1.05–1.2 区间，1.1 最稳妥） - 必须配
transition: transform 0.2s ease，否则缩放生硬 - 加
transform-origin: center防止放大后偏位（默认就是 center，显式写上更安心）
示例 CSS：
.nav a {
display: block;
padding: 12px 24px;
transition: transform 0.2s ease;
transform-origin: center;
}
.nav a:hover {
transform: scale(1.1);
}
容易踩的坑：缩放后文字溢出或遮挡
transform 不改变占位空间，但视觉内容会变大。若父容器没留余量，放大后文字可能切边、盖住隔壁链接，甚至溢出导航栏边界。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 确保
li或a有足够padding或min-width，比如设min-width: 100px - 避免同时在
:hover里改padding、margin或width，这些仍会触发重排 - 如果用
flex布局，别依赖flex: 1自适应缩放后的宽度——它按原始尺寸分配空间，放大后可能挤在一起
兼容性和辅助功能提醒
transform 在 IE10+、所有现代浏览器中都支持，无需前缀。但要注意：
- 读屏器不会感知
scale()变化，所以纯靠放大做“当前页高亮”不可靠；真正需要语义高亮，得配合aria-current="page"和颜色/图标变化 - 移动端 touch 设备上，
:hover行为不稳定（比如 iOS Safari 可能不触发），如需一致反馈，建议用 JS 监听touchstart+focus双路径
最易被忽略的一点：缩放基点默认是元素中心，但如果导航项高度不一致（比如有的带图标、有的纯文字），transform-origin: center 可能导致视觉错位——这时应统一设置 line-height 和 height，让所有链接盒模型对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
