移动端侧边栏应通过媒体查询（如@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 标注按钮与菜单关系，方便读屏软件识别

基本上就这些。不复杂但容易忽略细节——断点选对、动画写顺、交互补全，侧边栏就能在手机上既省空间又不掉体验。