移动端布局崩溃修复记录：从 768px 到 480px 的三级断点适配

TL;DR

移动端布局在 768px 以下崩溃：表格溢出、侧边栏遮挡正文、TOC 不可点击。修复方案：三级断点（768/640/480px）、表格横向滚动、TOC 改为悬浮按钮+抽屉。

摘要

• 影响：手机访问时排版错乱、部分内容不可操作
• 根因：PC 优先设计，没有适配小屏幕
• 修复：三级断点 + 组件级适配

时间线

时间	事件
06-08 14	用户用手机打开博客，发现侧边栏挡住了正文
14	初步排查：文章页双栏布局在 768px 以下没有切换单栏
15	修复侧边栏：768px 以下隐藏右侧栏
15	发现新问题：表格溢出屏幕
16	修复表格：overflow-x: auto
16	TOC 在移动端不可用：侧边栏隐藏后 TOC 消失
17	实现 TOC 悬浮按钮 + 抽屉方案
18	全站 480px 以下验证通过

问题 1：侧边栏遮挡正文

根因

文章页是 flex 双栏布局：.content { flex: 1 } + .sidebar { width: 280px }。

在 768px 以下，280px 侧边栏占了屏幕一半以上，正文挤到只剩 488px。

修复

768px 以下切换单栏，侧边栏隐藏：

@media (max-width: 768px) {
  .post-layout {
    flex-direction: column;
  }
  .sidebar {
    display: none;
  }
}

问题 2：表格溢出屏幕

根因

Markdown 表格渲染后是 <table> 元素，宽度由内容决定。如果某列内容很长（比如代码示例），表格宽度超过屏幕。

修复

table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}

display: block 让表格可以溢出容器，overflow-x: auto 加横向滚动条。

问题 3：TOC 在移动端消失

根因

TOC 在侧边栏里，侧边栏隐藏后 TOC 也没了。移动端用户无法导航长文章。

修复：悬浮按钮 + 抽屉

1. 768px 以下，在页面右下角显示 TOC 按钮
2. 点击按钮，从底部滑出 TOC 抽屉
3. 选择标题后自动滚动并关闭抽屉

// TOC 按钮
const tocBtn = document.getElementById('toc-toggle');
const tocDrawer = document.getElementById('toc-drawer');

if (window.innerWidth <= 900) {
  tocBtn.style.display = 'flex';
  tocBtn.addEventListener('click', () => {
    tocDrawer.classList.toggle('open');
  });
}

三级断点体系

/* 平板竖屏 */
@media (max-width: 768px) {
  .post-layout { flex-direction: column; }
  .sidebar { display: none; }
}

/* 大手机 */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .article-content { padding: 0 16px; }
}

/* 小手机 */
@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  .hero-stats { flex-direction: column; }
}

教训

• 不要只用 Chrome DevTools 的设备模拟：真实手机表现可能不同，尤其是 iOS Safari
• 移动端优先设计更省力：从小屏往上适配比从大屏往下适配容易
• TOC 是移动端刚需：长文章没有导航很难读

延伸阅读

• MDN: 响应式设计
• 提升阅读体验