移动端侧边栏应通过媒体查询（如@media (max-width: 767px)）隐藏，默认display: none，主内容区设width: 100%；用“☰”按钮触发抽屉式展开，侧边栏fixed定位+transform过渡+遮罩层；需支持Esc/点击遮罩关闭、键盘导航及读屏适配。
移动端侧边栏占屏过大，核心解决思路是用媒体查询切换布局：小屏幕下隐藏侧边栏，通过按钮触发抽屉式展开。
用媒体查询控制显示与隐藏
默认让侧边栏在移动端不显示，只保留主内容区。关键在于设置断点（如 768px 或 600px），并在小屏下把侧边栏设为 display: none 或 visibility: hidden（后者适合配合过渡动画）。
- 推荐用 max-width 断点，例如
@media (max-width: 767px) - 避免直接用
display: none配合 transform 动画——它会阻止动画生效，改用opacity+transform+visibility组合更稳妥 - 记得同时调整主内容区的宽度，让它在小屏下占满全宽（
width: 100%）
实现抽屉式侧边栏（汉堡菜单）
隐藏不是终点，要提供可访问的入口。加一个“☰”按钮，点击后从左/右滑出侧边栏，类似原生 App 体验。
- 侧边栏容器设为
position: fixed、top: 0、height: 100vh，初始transform: translateX(-100%) - 用 JavaScript 切换一个类名（如
.sidebar-open），激活时改为transform: translateX(0) - 加
transition: transform 0.3s ease让滑入更自然 - 建议叠加半透明遮罩层（
backdrop-filter: blur(2px)或简单background: rgba(0,0,0,0.5)）提升视觉层次
适配触摸与键盘操作
抽屉菜单不只是“能点开”，还要好用。移动端用户常滑动误触，桌面用户依赖键盘导航。
立即学习“前端免费学习笔记（深入）”；
- 菜单打开时，给
加overflow: hidden，防止背景滚动 - 按 Esc 键或点击遮罩层应关闭菜单（JS 监听
keydown和click） - 确保菜单项有足够点击热区（最小 44×44px），符合移动可访问性标准
- 用
aria-expanded和aria-controls标注按钮与菜单关系，方便读屏软件识别
基本上就这些。不复杂但容易忽略细节——断点选对、动画写顺、交互补全，侧边栏就能在手机上既省空间又不掉体验。
