移动端单列时间轴需重构定位模型，放弃PC端左右交替逻辑，改用flex布局与顶部锚定；伪元素断线因父容器高度塌陷，须重置主线、圆点及内容区样式。
移动端单列时间轴不是“加个 @media 就完事”，而是必须切断原有左右交替逻辑、重置定位锚点、并主动撑开容器高度——否则伪元素画的竖线会断，圆点会飘，内容会重叠。
为什么 .timeline::before 在手机上只显示半截
根本原因：父容器 .timeline 没有可计算的高度来源。伪元素设了 top: 0; bottom: 0;，但父容器靠子项流式内容撑高；而子项一旦用了 position: absolute（比如圆点或连接线），就脱离文档流，父容器高度塌陷。
- 别指望
height: 100%自动生效——它需要一个明确的父级高度参照 - 临时解法：给
.timeline加min-height: 60vh或用伪元素占位：.timeline::after { content: ""; display: block; padding-top: 1px; } - 更稳妥的做法：改用
flex-direction: column+gap控制间距，彻底绕过绝对定位依赖
@media (max-width: 768px) 里必须重置的三个值
PC 端那套 left: 50% + transform: translateX(-50%) 在手机上完全失效。小屏下主线要从“竖线”变成“横线”，节点要从“居中对齐轴线”变成“左对齐+顶部锚定”。
- 主线：把
.timeline::before改为width: 100%; height: 2px; top: 50%; transform: translateY(-50%); left: 0; - 圆点：
.timeline-item::before去掉left: 50%和transform，改为top: 0; left: 0; transform: none; - 内容区：清除所有
margin-left/margin-right交替逻辑，统一设margin-top: 16px;，避免左右错位导致文字被裁切
用 Flex 替代 Absolute 定位更可靠
很多团队卡在“为什么一加媒体查询就乱套”，其实是死守 position: absolute 做节点定位。移动端单列场景下，Flex 天然适配流式排列，且不依赖父容器高度。
- 主容器设
display: flex; flex-direction: column; gap: 24px; - 每个
.timeline-item内部用display: flex; align-items: flex-start;，把时间、标题、描述按需排列 - 圆点改用真实元素（如
）而非伪元素，避免 z-index 和层叠上下文冲突 - 如果仍需伪元素画线，只用
::after在每个.timeline-item底部画短横线：content: ""; display: block; width: 24px; height: 2px; background: #999;
真正难的不是写断点，而是意识到：移动端单列 ≠ PC 布局的缩小版。它需要重构定位模型、放弃“视觉居中”的执念，并接受内容从“环绕轴线”变为“依次堆叠”。那些在 PC 上靠 nth-child(odd) 左右切换的样式，在手机上必须整块注释掉——留着就是隐患。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
