结论：纯HTML+CSS仿美团首页的核心是语义化结构、响应式栅格与可访问导航；应优先用grid替代float布局，慎用overflow/transform以防sticky失效，商家列表需用auto-fill+minmax实现无重绘列数切换。
直接说结论：用纯 HTML + CSS 仿美团外卖首页，核心不是“像不像”，而是“能否在不加载 JS 的前提下完成语义化结构 + 响应式栅格 + 可访问导航”。真实项目里没人纯 HTML 仿首页——但如果你正卡在布局塌陷、Flex 换行错乱、或 position: sticky 在移动端失效，下面这些才是实际要动的手。
为什么用 display: grid 而不是 float 或 inline-block 做顶部导航栏
美团首页顶部是固定高度的横向导航（首页、订单、我的等），很多人一上来就写 float: left，结果在 iOS Safari 下文字截断、图标偏移。根本原因是 float 会脱离文档流，且对 line-height 和 vertical-align 极其敏感。
实操建议：
- 用
display: grid配合grid-template-columns: repeat(auto-fit, minmax(80px, 1fr))，自动均分且响应式收缩 - 每个导航项用
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" role="button"></a>，加aria-current="page"标记当前页，满足可访问性要求 - 避免给父容器设固定
height，改用min-height+padding控制视觉高度，防止字体放大后文字溢出
position: sticky 在轮播图下方失效的三个真实原因
美团首页 Banner 下方是“附近商家”标题栏，滚动时需吸顶。但很多人写完 position: sticky; top: 0; 发现没反应——不是代码写错了，是被以下任一条件阻断：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
overflow: hidden或overflow: auto（常见于轮播图外层div） - 祖先元素设置了
transform（哪怕只是transform: translateZ(0)，也会创建新层叠上下文，阻断 sticky） - 目标元素本身是
flex子项且父级未设align-items: flex-start，导致计算基准偏移
验证方法：临时删掉轮播图区域，看 sticky 是否恢复；若恢复，问题一定出在轮播容器的 overflow 或 transform 上。
如何让“商家列表”在不同设备上保持单列/双列/三列切换不重绘
美团首页商家卡片在手机竖屏是单列，横屏变双列，Pad 上是三列。关键不是媒体查询写多少条，而是避免用 width: 33.33% 这类固定值——它会导致小屏下卡片宽度超限、出现横向滚动条。
实操建议：
- 用
display: grid+grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))，160px 是卡片最小可用宽度（含 padding/margin） - 卡片内部用
aspect-ratio: 5 / 4控制图片区域比例，避免拉伸变形（注意 Safari 15.4+ 才支持，旧版 fallback 用padding-top: 80%+ 绝对定位） - 禁用
white-space: nowrap在店名文字上，否则长店名会撑破卡片
最常被忽略的是字体渲染差异：美团用的是 "PingFang SC", "Helvetica Neue"，但直接写这串在 Windows 上会回退到微软雅黑，字重变粗、行高变大，导致卡片高度不一致。真要贴近，得用 font-feature-settings: "tnum"; 控制数字等宽，以及明确设 line-height: 1.4 而非 1.4em。
