真正响应式页脚需用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))，结合 grid-auto-rows: minmax(72px, auto)、grid-column: 1 / -1 跨列，小屏用 @media (max-width: 520px) 降级并配 clamp() 字体，旧 Safari 需 @supports 降级为 flex-wrap: wrap 的 Flex 方案。
用 grid-template-columns: repeat(auto-fit, minmax()) 实现自动列数收缩
固定列数（比如 repeat(4, 1fr)）在小屏上只会把每列压窄，不会减少列数——结果就是文字挤、图标糊、点击区域过小。真正响应式的解法是让浏览器根据容器宽度“算出能放几列”，而不是你硬写死。
-
minmax(250px, 1fr)中的250px是关键：它代表每列最小可用宽度，必须结合内容实测（如含图标+文字的链接项，至少预留 200–280px） -
auto-fit会合并空轨道，auto-fill则保留所有可能列（哪怕为空），页脚选auto-fit更合理 - 别漏加
grid-auto-rows: minmax(72px, auto)，否则高度不均的栏目（如“© 2026” vs “友情链接（12条）”）会拉伸整行，破坏对齐
跨列区块（如版权栏）必须用 grid-column: 1 / -1，不能用 span
用 grid-column: span 2 看似方便，但 span 是按当前网格轨道数计算的。大屏有 4 列时，span 2 占一半；小屏只剩 2 列时，它就占满整行——可如果该区块只有两行文字，就会把整行撑高，挤乱其他列。
-
grid-column: 1 / -1始终从第一格到最后一格，不受轨道数变化影响 - 避免和
span混用在同一容器内，某些旧版 Safari 会因解析歧义直接跳过整条规则 - 如果版权栏需要居中而非铺满，改用
justify-self: center+width: fit-content，更可控
移动端切单列不是只靠 @media (max-width: 768px)
768px 是常见断点，但页脚是否该堆叠，取决于内容密度，不是设备宽度。比如某列含带图标的长地址，在 520px 宽度下已出现横向滚动，这时再等 768px 才切列就晚了。
- 推荐补一刀
@media (max-width: 520px)：把字体调为clamp(0.875rem, 1.25vw, 1rem)，图标尺寸缩到1rem，行高降到1.4 - 小屏下改
flex-direction: column比依赖 Grid 自动折行更稳——尤其当页脚内部用 Flex 排链接时，column能彻底规避换行逻辑冲突 - 别给页脚设
min-height或height: 100vh，小屏堆叠后内容少时会强制留白，视觉突兀
Safari 10.1–12.1 需要 @supports 降级到 Flex
这些旧版 Safari 对 auto-fit 和 minmax() 支持不全，会直接渲染为单列或完全不生效。不能指望用户都升级，得主动兜底。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports not (grid-template-columns: repeat(auto-fit, 1fr)))包裹 Grid 规则，里面写 Flex 方案 - Flex 降级方案必须显式声明
flex-wrap: wrap（默认是nowrap），并配max-width控制容器宽度，否则链接仍会溢出 - 测试时可在 Safari 开发者工具中关闭 “CSS Grid Layout” 实验性功能，确认回退是否符合预期
minmax()，而是测出那个“最小宽度”值——它得同时容纳最长标题、最宽图标、左右内边距和 gap，差 10px 就可能在某台安卓 WebView 里触发换行错位。 
