应使用 grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)) 实现响应式均分，配合 flex 布局对齐图标文字、统一 padding 预留激活空间、SVG 设置偶数尺寸与精确 viewBox，并用 gap 控制间距。
grid-template-columns 怎么设才能让图标文字均匀撑满底部导航
均分不是靠 repeat(4, 1fr) 就万事大吉——它只管列宽，不管内容对齐和内边距。实际中图标+文字组合高度不一、字体渲染差异、小屏下文字换行，都会让“视觉均匀”失效。
- 用
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr))替代固定列数，让网格自动适配容器宽度，避免小屏溢出或大屏留白 - 每项必须包裹在独立
或中，并设display: flex; flex-direction: column; align-items: center;，否则图标和文字会错位或不对齐 - 图标用
或width: 20px; height: 20px; flex-shrink: 0;，防止被压缩变形 - 文字用
font-size: 12px;+line-height: 1.2;控制高度，避免换行后拉高整行，破坏均布节奏
justify-content 和 justify-items 混用导致图标偏左或间距忽大忽小
底部导航常见错误是同时设 justify-content: space-around 和 justify-items: center，前者作用于网格轨道之间，后者作用于单元格内容，两者冲突会让子元素定位飘忽。
- 统一用
justify-content: stretch;（默认值），靠子项自身的align-items: center控制内部对齐 - 如果想微调项间间隙，改用
gap: 8px;，比space-between更可控，且兼容所有现代浏览器 - 不要给网格项设
margin，尤其左右 margin —— 它会干扰 grid 的自动计算，小屏下容易触发横向滚动
active 状态下图标文字偏移、底部线错位
点击态加 border-bottom 或 transform: translateY(-2px) 后，整个项高度突变，其他项没同步变化，就显得“跳”或者底边不齐。
- 提前预留空间：给所有项设
padding-bottom: 2px;，激活时用border-bottom: 2px solid #007aff;替换，高度不变 - 避免用
transform做状态偏移，它脱离文档流，会导致父容器无法感知尺寸变化 - 图标和文字都用
vertical-align: middle;（配合 inline 元素）或align-self: center;（flex 子项），确保 baseline 对齐，不然激活时视觉重心会晃
小图标在 iOS Safari 上模糊、文字发虚
这不是 CSS 问题，是 SVG 渲染精度和像素对齐没处理好。iOS 默认对非整数像素做抗锯齿，小图标边缘就糊成一片。
- SVG 必须设
width和height为偶数像素（如20px），且 viewBox 与尺寸比例严格为 1:1（如viewBox="0 0 20 20"） - 加
shape-rendering: crispEdges;强制关闭抗锯齿，适合线条简洁的导航图标 - 文字别用
font-smoothing: antialiased;，iOS 下反而加重发虚，保持默认即可
实际项目里最常漏的是 gap 替代 justify-content 和 SVG 的 viewBox 精确匹配——这两处一错，整个底部导航就从“整齐”变成“将就”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
