Flex-direction 切换时子元素顺序错乱
用 flex-direction: column 做移动端页脚、flex-direction: row 做桌面端，最常踩的坑是链接顺序视觉上颠倒了——比如 HTML 里写的是「GitHub|Twitter|RSS」，桌面端正常从左到右，但移动端却变成从上到下「RSS|Twitter|GitHub」。
这是因为 flex-direction: column 默认按文档流从上到下排列，而没改 order 或重排 HTML，视觉顺序就反了。
- 加
flex-direction: column-reverse不解决问题，它只是翻转流，不能对齐设计意图 - 真正可靠的做法是保持 HTML 顺序不变，用
order控制视觉位置：给每个链接加order值，媒体查询里重置 - 更轻量的方案是直接在移动端用
flex-direction: column+align-items: center，并确保 HTML 中链接顺序就是你希望的阅读顺序（从上到下即从左到右的映射）
footer a:nth-child(1) {order: 1;} footer a:nth-child(2) {order: 2;} footer a:nth-child(3) {order: 3;} @media (max-width: 768px) {footer { flex-direction: column;} /* 不动 order，靠 HTML 顺序和 column 流自然对齐 */ }友情链接项宽度不均导致换行错位
用 flex-wrap: wrap 让链接在窄屏自动折行时，如果某些链接文字长（如「知乎专栏」）、某些短（如「RSS」），默认 flex-basis: auto 会让它们各自占内容宽度，结果一行塞不满就提前换行，留出大片空白。
这不是 bug，是 Flex 默认行为：不设约束时，子项按内容撑开，flex-wrap 只看“当前行剩余空间够不够放下下一个”，不是“是否平均分配”。
立即学习 “ 前端免费学习笔记（深入）”；
- 加
flex: 1 1 200px给每个链接，让它们基础宽度 200px、可伸缩、可收缩 - 或者统一设
min-width: 120px+flex: 1，避免过窄压缩，又保留弹性 - 别用
width: 25%，它在 flex 容器里会被flex覆盖，且小屏下 25% 可能远超内容所需，造成空隙
响应断点选 768px 还是 640px？
选断点不是看「iPad 宽度」或「某款手机分辨率」，而是看页脚链接数量和单个链接内容长度。768px 对 4 个中等长度链接（如「GitHub|Twitter|Newsletter|About」）刚好两行，但若只有 3 个链接，640px 就该切列布局了——否则在 iPhone SE 屏上还强行横排，字被挤成「Git……|Twit……|News……」，可读性崩坏。
- 用
em或rem写断点更稳妥：@media (max-width: 40em)（≈640px），适配字体缩放 - 真机调试时重点看 iOS Safari 的渲染：它对
flex-wrap和text-overflow的处理比 Chrome 更保守 - 别依赖设备像素比（dpr）做断点，CSS 媒体查询里的
width永远是 CSS 像素，不是物理像素
链接 hover 状态在触屏设备上残留
桌面端加 :hover {color: #007bff;} 很自然，但 iOS Safari 点击后会卡住 hover 样式，直到用户点别的地方——用户以为链接失效了。
这不是 CSS 能单独解决的，得配合交互逻辑：要么放弃 hover，要么用 JS 在 touchstart 时临时加 class，要么只对非触屏设备启用 hover。
- 最简方案：用
@media (hover: hover) and (pointer: fine)包裹 hover 规则，iOS/Android 默认不匹配 - 别用
ontouchstart在 body 上打标记再切 class，太重，且首次触摸前无反馈 - 如果必须有反馈，用
:active+transition，它在触屏上触发及时，且无需 JS
页脚这种低交互密度区域，hover 其实不是刚需；优先保证点击目标足够大（至少 44×44px）、颜色对比达标，比花时间修 hover 更实在。
