用@media切换flex-direction和flex-wrap需同步重置容器属性：移动端必须显式设flex-wrap:wrap，PC端重置padding、gap、max-width；禁用float/inline-block；键盘弹出时避免纯CSS固定定位；间距用clamp或CSS变量响应式管理。
直接用 @media 切换 flex-direction 和 flex-wrap 就能搞定，但多数人卡在“切了没反应”或“PC端列掉行”，问题通常不在媒体查询本身，而在容器属性没同步重置。
移动端堆叠失效：检查 flex-wrap: wrap 是否显式声明
Flex 默认是 flex-wrap: nowrap，哪怕子项总宽超父容器，也不会自动换行——尤其 iOS Safari 里可能直接截断文字，还不报错。
- 必须显式写
flex-wrap: wrap，不能省略 - 如果页脚子项用了固定宽度（如
width: 200px），在窄屏下容易撑破容器，建议改用flex: 1或max-width: 100% - 避免对
footer设height，否则换行后内容被裁剪
PC端三列不均等或掉行：同步重置父容器的 padding、gap 和 max-width
只改 flex-direction: row 不够，父容器若带 max-width: 768px 或左右 padding: 20px，PC端实际可用宽度会被压缩，第三列大概率掉到第二行。
- PC端媒体查询中，把
padding改为padding: 0 40px这类适配值，别留着移动端的16px - 用
gap替代子项margin，更可控；PC端设gap: 32px，移动端可缩为gap: 16px - 如果父容器有
max-width: 768px，PC端务必重置为max-width: 1200px或none
为什么别用 float 或 inline-block 做响应式页脚
它们对媒体查询切换不敏感：你改了宽度，float 元素不会自动重排；inline-block 会因 HTML 换行符产生 4px 左右间隙，且这个间隙无法用媒体查询消除。
立即学习“前端免费学习笔记（深入）”；
-
float必须手动清除浮动，而媒体查询生效时，::after伪元素可能没重绘，导致布局错乱 -
inline-block的间隙本质是文本节点，设font-size: 0能压，但子元素得全部重设字体，维护成本高 - 现代项目里，
flex和grid是唯一合理选择；grid更适合列宽一致的页脚，但记得用grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))，别写死repeat(3, 1fr)
键盘弹出导致页脚上浮：这不是 CSS 问题，但得提前防
安卓微信、iOS Safari 在软键盘弹出时，会收缩视口高度，但不触发 resize 事件。此时 position: fixed 或 bottom: 0 的页脚会被顶到屏幕中间。
- 不要依赖纯 CSS 固定定位来应对这种动态变化
- 若页脚内容少，优先用 Flexbox 的 sticky footer 方案（
min-height: 100vh+flex: 1） - 真要监听，得结合
focusin和resize，并在键盘收起后强制重排，但多数页脚场景其实不需要——堆叠结构本身已足够容错
最易被忽略的一点：所有间距（padding、gap、font-size）别硬写 px，用 clamp(12px, 3vw, 20px) 或 CSS 变量统一管理，否则在 375px 屏上，16px 内边距视觉密度会远高于桌面端，堆叠后显得拥挤不堪。
