grid比flex更合适因auto-fit+minmax可自适应列数：minmax(80px,1fr)设单列宽幅，auto-fit丢弃空列，repeat重复应用；需配合flex-column堆叠、min-height触控、aria-current高亮及Safari兼容处理。
底部导航栏用
布局为什么比
更合适？
因为底部导航项数量常固定（如 3–5 个），但屏幕宽度变化大，
在小屏上容易挤出横向滚动或文字换行，而
的
+
能真正“按需分配列数”，不依赖媒体查询就能自适应。关键在于：它不是等分容器，而是让每列“至少宽 X，最多占满可用空间”，再自动丢弃空列。
中每个参数的实际作用
这段代码不是魔法，拆开看：
：单列最小宽度 80px（保证图标+文字可读），最大为均分剩余空间的 1 份（
）
：生成尽可能多的列，但把所有空列（没内容的列）合并掉，让有内容的列自动拉伸填满
：把上面这个“智能列定义”重复应用，直到放不下下一个
对比
：它会保留空列，导致小屏下出现大量空白间隙，实际项目中几乎不用。
完整可运行的底部导航栏 CSS 写法（含移动端适配细节）
只靠
不够，还要处理几个真实问题：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
小屏下图标文字堆叠？加
+ 子项
最后一项被截断？确保父容器
不写死，用
或让内容撑开
点击区域太小？给每个导航项设置
（符合移动端触控最小尺寸）
需要高亮当前页？用
配合
和
，别用 JS 切 class
容易被忽略的兼容性和性能坑
在 Safari 14.1+ 才稳定支持，iOS 14.5+ 无问题；但如果你必须支持 iOS 13，得降级为
+
限制列数。另外，别在
里用
或
做最小值——字体缩放时会导致列数突变，坚持用
或
。
还有个隐性问题：如果导航项里包含图片或 SVG，记得设
，否则它们可能撑开列宽，破坏
的预期行为。
gridflexflexgridauto-fitminmaxrepeat(auto-fit, minmax(80px, 1fr))minmax(80px, 1fr)1frauto-fitrepeat(...)auto-fillgridgrid-template-rows: auto 1frdisplay: flex; flex-direction: columnheightmin-heightmin-height: 48px:is([aria-current="page"])colorfont-weightfooter nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 4px;
padding: 8px 12px;
}
footer a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 48px;
font-size: 12px;
text-decoration: none;
color: #666;
}
footer a[aria-current="page"] {
color: #007bff;
font-weight: 600;
}auto-fitauto-fillmax-widthminmax()emrempxvwwidth: 20px; height: 20px;minmax