移动端底栏用grid-template-columns: repeat(auto-fit, minmax(80px, 1fr))最稳，避免1fr硬写导致图标文字被压窄；需兼容iOS 13时降级为auto-fill+max-width兜底，并用媒体查询明确列数、显式约束子项高度与对齐。
移动端底栏用 grid-template-columns: repeat(auto-fit, minmax()) 最稳
直接写 1fr 1fr 1fr 在手机上会把图标和文字压成窄条，用户点不准、文字看不清。真正可用的写法是让 Grid 自己决定列数：先设最小宽度（比如 80px），再让每项尽可能均分剩余空间。
-
minmax(80px, 1fr)表示每项至少宽 80px，超出部分按份数分配，小屏自动退为单列，中屏双列，大屏三列以上 - 用
auto-fit而非auto-fill：前者会合并空轨道，避免底栏右侧留白；后者保留空位，适合预设结构（如固定 5 个图标位） - 别在
minmax()里写em或rem——字体缩放时列数会突变，坚持用px或vw
Safari 和 iOS 13 兼容性必须手动兜底
auto-fit 在 Safari 14.1+ 才稳定支持，iOS 14.5+ 没问题，但如果你的项目仍需兼容 iOS 13（比如企业内网 App），就得降级。
- 降级方案：
repeat(auto-fill, minmax(80px, 1fr))+ 外层容器加max-width: 320px（限制最多 4 列），靠overflow-x: auto或隐藏溢出保功能 - 更稳妥的做法是用媒体查询明确控制列数：
@media (max-width: 480px) { grid-template-columns: 1fr; }，避开auto-fit的兼容黑洞 - 检查父容器是否设置了
display: grid且有明确宽度——Safari 对未设宽的祖先会静默忽略整条规则
底栏子项高度和对齐必须显式约束
只设网格列，不控子项尺寸，会导致图标上下错位、文字行高塌陷，尤其在 Android Chrome 中常见。
-
footer a必须设display: flex+flex-direction: column+align-items: center+justify-content: center，否则文字默认 baseline 对齐，视觉下沉 - 给子项加
min-height: 48px（触控安全区最低要求），避免内容少时高度不足 - 别依赖
line-height垂直居中——它只对单行有效，换行后失效；flex居中才是可靠解
别在底栏里混用 fr 和固定像素单位
比如写成 grid-template-columns: 60px 1fr 60px，在手机上左右两个 60px 占掉 120px，中间 1fr 可能只剩不到 20px，图标被压扁甚至渲染异常。
立即学习“前端免费学习笔记（深入）”；
- 真要固定图标宽度，用
minmax(60px, max-content)更安全：最小 60px，内容宽就撑开，不会死锁 - 如果某项需要“图标+文字”组合，优先用
grid-template-areas控制语义顺序，比强行塞进列轨道更可控 - 所有间距统一走
gap，别在子项上加margin——换行时右边多出空白，且无法控制行间距
auto-fit 看似聪明，但一旦遇到旧 Safari 或内容动态加载延迟，它可能根本不生效，此时硬编码断点反而更可靠。 
