通过 CSS transform: scale() 实现链接悬停时的视觉放大，避免因 font-size 变化导致的重排（reflow）和邻近元素位移，确保导航栏布局稳定、响应精准。
通过 css `transform: scale()` 实现链接悬停时的视觉放大，避免因 `font-size` 变化导致的重排（reflow）和邻近元素位移，确保导航栏布局稳定、响应精准。
在构建响应式导航栏时，一个常见但易被忽视的问题是：当对 标签使用 font-size: hover 时，文字尺寸增大将直接改变其内容盒（content box）宽度与高度，从而触发浏览器重排（reflow），导致相邻链接或容器发生位移——尤其在 flex 布局中，这种偏移会破坏精心设计的间距与对齐。
根本原因在于：font-size 是影响盒模型尺寸的布局属性，而 transform 属于绘制层变换，它仅作用于渲染后的元素视觉层，不参与文档流计算，因此不会影响其他元素的位置或尺寸。
✅ 正确解法：用 transform: scale() 替代 font-size 动态调整
只需将原 CSS 中的字体大小变化逻辑替换为缩放变换：
.navigation-links li a:hover {
transform: scale(1.1); /* 放大至110%，视觉等效于字体增大 */
transition: transform 0.2s ease; /* 添加平滑过渡，提升体验 */
}⚠️ 注意事项：
- 必须配合 transition 使用：否则缩放会突兀跳变；推荐 ease 或 cubic-bezier(.3,1.2,.5,1) 实现更自然的弹性效果；
- 避免与其他影响布局的 hover 变化混用：如同时设置 margin、padding 或 width，仍可能引发偏移；
- 确保父容器有足够空间容纳缩放后的内容：虽然 transform 不触发重排，但过大的缩放（如 scale(1.5)）可能导致文字溢出或遮挡；建议控制在 1.05–1.2 区间，并结合 transform-origin: center 保持居中缩放；
- 兼容性无忧：transform 在所有现代浏览器（含 IE10+）中均被广泛支持，无需前缀。
? 进阶优化：若需保持点击热区精准，可额外添加 transform-style: preserve-3d（非必需），或为 .navigation-links li 设置 min-width / flex-basis 预留基础空间，进一步增强稳定性。
最终效果：悬停时链接“浮起放大”，其余元素纹丝不动，布局零抖动，专业感与用户体验兼得。
