移动端页脚分栏不堆叠需设flex-wrap: wrap并用max-width: 768px断点；grid响应式应使用grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，避免auto-fill和height: 100vh。
移动端页脚分栏不堆叠？检查 flex-wrap 和断点设置
响应式页脚在小屏上没自动换行，大概率是容器用了 display: flex 但漏了 flex-wrap: wrap。Flex 默认不换行，即使子项宽度超出了父容器，也会强行横向挤压或溢出——尤其在 iOS Safari 里，可能直接截断文字却无报错提示。
-
flex-wrap: wrap必须显式声明，不能依赖浏览器默认（它默认是nowrap） - 断点建议用
max-width: 768px而非max-width: 480px：很多平板横屏、折叠屏展开后宽度在 500–700px 之间，只设 480px 会导致中等屏页脚仍保持分栏 - 避免对
footer直接设固定高度，否则wrap后内容撑高会被裁剪
grid 实现响应式分栏更可控，但注意 grid-template-columns 的写法
用 CSS Grid 写页脚分栏，比 Flex 更容易统一列宽和对齐，但新手常卡在模板列定义上。比如写成 grid-template-columns: repeat(4, 1fr)，在移动端会强行撑出 4 列，根本不会“自动堆叠”——Grid 不会像 Flex 那样根据容器宽度自动折行。
- 真正响应式的写法是：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) -
auto-fit让浏览器尽可能多放列，minmax(200px, 1fr)保证每列至少 200px 宽，超出就均分剩余空间 - 别用
auto-fill替代auto-fit：前者会渲染所有可能列（哪怕为空），影响语义结构和可访问性 - 旧版 Safari（auto-fit，需加
@supports回退到 Flex 方案
字体大小和内边距没随屏幕缩放？别只改 font-size
页脚堆叠后看着挤，常被归因为“没响应”，其实问题出在单位选择。比如写死 padding: 16px 或 font-size: 14px，在 375px 宽的 iPhone 屏上，16px 的内边距占屏宽 4% 左右，但视觉密度远高于桌面端——人眼感知的是相对比例，不是绝对像素。
- 优先用
rem配合根字体动态调整：html { font-size: clamp(14px, 2.5vw, 16px); } -
padding和margin推荐用em或rem，避免px在高 DPR 设备上模糊或过小 - 别在媒体查询里逐个重写所有间距——用 CSS 自定义属性集中管理更可靠，例如：
--footer-gap: clamp(12px, 3vw, 20px);，然后子项用gap: var(--footer-gap)
键盘弹出导致页脚错位？重点监听 resize 和 focusin
安卓微信、iOS Safari 在软键盘弹出时，会触发视口高度变化，但不会触发常规的 resize 事件（尤其 iOS）。结果就是页脚被顶到屏幕中间，或者底部留白——这不是 CSS 问题，是 DOM 布局时机没对上。
- 不要只靠 CSS
position: fixed或bottom: 0，它们无法响应视口动态收缩 - 监听
focusin事件，在输入框获得焦点时给body加临时 class，例如body.is-keyboard-open，再用 CSS 控制页脚定位 - 对 iOS，补充监听
visualViewport的resize事件：visualViewport.addEventListener('resize', () => { ... })，这是目前最准的视口变化信号 - 避免用
height: 100vh布局页脚容器——键盘弹出会缩小vh，导致布局塌陷
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
