CSS如何制作响应式导航菜单_结合Grid布局实现水平平铺导航

Grid导航项水平平铺需用repeat(auto-fit, minmax(120px, 1fr)))，auto-fit合并空轨道，minmax确保最小宽度与弹性分配；移动端须加touch-action: manipulation和cursor: pointer；对齐优先用flex而非align-items；IE11不支持auto-fit/minmax，需@supports降级为inline-block。Grid布局下导航项不水平平铺？检查grid-template-columns是否设为repeat(auto-fit, minmax(120px, 1fr)))Grid实现水平平铺的关键不是display: grid本身，而是列模板如何响应容器宽度。用repeat(auto-fill, 1fr)会导致小屏下强行等分、文字被压缩；而auto-fit配合minmax()才能真正“能放几个放几个”。常见错误现象：nav在手机上变成单列堆叠、中间留白，或文字溢出截断。必须用auto-fit（不是auto-fill），它会合并空轨道minmax(120px, 1fr)中120px是单个菜单项最小宽度，低于此值就收缩换行；1fr是最大可占比例，确保均分剩余空间父容器需设width: 100%或max-width，否则Grid可能按内容撑开，失去响应行为移动端点击无反应？touch-action: manipulation和cursor: pointer不能少Grid布局本身不解决交互问题。iOS Safari对非<a></a>或button元素的点击区域识别较弱，尤其当菜单项用div包裹时，容易出现点不动、延迟300ms响应的情况。使用场景：导航项是div或span而非语义化标签时。立即学习“前端免费学习笔记（深入）”；给每个导航项加cursor: pointer，触发浏览器对可点击元素的默认识别加上touch-action: manipulation，禁用双击缩放，同时加速触摸响应避免在:hover里只改颜色——移动端没hover，得同步写:active和focus-within菜单高度塌陷或文字垂直不对齐？align-items和line-height要协同控制Grid容器默认align-items: stretch，但导航文字常因字体度量差异（如font-size与line-height不匹配）导致上下留白不均，看起来像没居中。 WisPaper 复旦大学研发的AI学术搜索工具，5分钟内筛选1000篇论文