侧边栏应使用语义化标签：导航用，辅助内容用；响应式优先用flex布局+媒体查询，避免混用fixed与flex；移动端默认隐藏需css控制类名切换，图标项须扩大点击区域并确保视觉反馈。
直接用 flex 布局 + @media 媒体查询就能加，不需要 JS 就能响应式折叠；<aside></aside> 或 <nav></nav> 语义化标签必须用，否则读屏器和 SEO 都会出问题。
侧边栏该用 <aside></aside> 还是 <nav></nav>
看内容性质——纯导航链接（比如后台菜单、文章分类）用 <nav aria-label="主菜单"></nav>；如果是推荐文章、广告、作者信息这类辅助性但非导航的内容，才用 <aside></aside>。别混着用，也别全塞进一个 <div> 里。结构示例：
<pre class="brush:php;toolbar:false;">
<div class="layout">
<nav aria-label="侧边导航"><ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
</ul></nav><main class="content">...</main>
</div>
</pre>
<ul>
<li>
<code><nav></nav> 必须带 aria-label，否则读屏器不知道这是什么
<aside></aside> 不需要 aria-label，但里面如果有链接列表，建议再套一层 <nav></nav>
<nav></nav> ——它们属于页眉，该归 <header></header>
display: flex 和 position: fixed 到底选哪个
95% 的场景用 flex 更稳。它让侧边栏和主内容自动分配空间，不脱离文档流，也不用手动算 margin-left 补位。只有当你明确要求“永远贴在视口左边、滚动时也不动”，才考虑 position: fixed，但得同步处理三件事：
- 给
html, body加height: 100% - 给
<main></main>加margin-left: 240px（假设侧边栏宽 240px） - 确保父容器有高度（比如
.layout { min-height: 100vh; }）
混用 position: fixed 和 flex 子项，在 Safari 和 Chrome 中解析行为不一致，点开就错位。
移动端怎么让侧边栏默认隐藏、点击按钮才出现
关键不是 JS 控制显隐，而是 CSS 先定义好状态，JS 只负责切类名。常见错误是媒体查询断点设成 @media (max-width: 768px)，结果 iPad 竖屏也折叠了。更准的写法是：
@media (max-width: 480px) {
.sidebar { display: none; }
.sidebar.active { display: block; }
.content.shifted { margin-left: 240px; }
}
- 按钮点击 JS 只做两件事：
document.querySelector('.sidebar').classList.toggle('active')和document.querySelector('.content').classList.toggle('shifted') - 别用
visibility: hidden或opacity: 0代替display: none——前者仍占布局空间，会导致点击热区错位 - 本地双击打开的
file://页面里，JS 无法读取window.location.pathname，所以“自动高亮当前菜单项”必须手动加class="active"
图标型侧边栏怎么避免小屏下点不中
纯图标没文字时，点击热区太小，尤其在手机上。解决方案不是放大图标，而是扩大容器可点击范围：
- 每个图标项用
<a></a>或<button></button>包裹，加padding: 12px 0 - 用内联
<svg></svg>，设fill: currentColor，避免字体图标在低分辨率屏发虚或加载失败留白 - 悬停/聚焦状态必须加视觉反馈，比如
background-color: #f0f0f0或border-radius: 8px，否则用户不知道点没点上 - 移动端别依赖
:hover，要同时写:focus和:active
最常被忽略的是：侧边栏容器本身没设 min-height，内容少时塌缩，导致 position: sticky 失效或 Flex 布局错乱。加一句 min-height: 100vh 到外层容器，比调十次 JS 逻辑都管用。
