侧边栏在小屏上应根据内容优先级选择隐藏或收缩：次要内容直接 display: none；关键菜单则用媒体查询缩窄宽度或配合按钮展开。
侧边栏在小屏上消失还是收缩？先选对策略
响应式侧边栏没有标准答案，关键看内容优先级。如果侧边栏信息次要（比如广告、次要导航），直接用 display: none 隐藏最省事；如果必须保留（如管理后台的菜单），就用媒体查询缩窄宽度 + 滚动或折叠交互。
常见错误是强行让 250px 宽侧边栏在手机上“挤”成 80px——文字重叠、图标不可点、触摸目标太小。这不是响应式，是自欺欺人。
推荐做法：
- 桌面端：固定
width: 260px，使用flex或grid布局 - 平板（768px–1023px）：缩到
width: 200px，隐藏部分文字仅留图标 - 手机（
max-width: 767px）：设为width: 0+overflow: hidden，配合按钮展开（用transform: translateX()更流畅）
媒体查询断点怎么写才不踩坑
别抄网上“通用断点”，@media (max-width: 768px) 在 iPad Pro 上可能误触发——它的逻辑分辨率是 1024×1366，但 viewport 缩放后实际宽度常为 834px，刚好卡在边界上。
更稳妥的做法：
- 用设备无关的视口单位：
@media (max-width: 48em)（1em = 浏览器默认字号，通常 16px，即 768px） - 避免只靠宽度判断：加
and (orientation: portrait)区分竖屏手机和横屏平板 - 不要嵌套媒体查询，CSS 会按顺序覆盖，写成独立规则更可控
- 测试时禁用 Chrome 的“设备模拟器”缩放，用真实
device-width查看 computed styles
flex 布局下侧边栏缩放后主内容不撑满？检查 flex-basis
很多人用 display: flex 做左右布局，但侧边栏缩小时主内容区卡在原宽度，留白严重。问题常出在 flex: 1 没生效——因为父容器没设 min-width: 0，子项会按内容撑开。
实操要点：
- 主内容区必须加
min-width: 0，否则flex: 1失效 - 侧边栏设
flex: 0 0 auto（不伸缩、不收缩、按内容宽），再用媒体查询改width - 避免同时设
width和flex，CSS 会优先按flex计算，width变成初始值 - 示例结构：
main {
display: flex;
}
aside {
flex: 0 0 260px; /* 初始宽度 */
}
main > section {
flex: 1;
min-width: 0; /* 关键！否则 flex:1 不起作用 */
}
移动端展开侧边栏时页面抖动？别用 width 动画
用 width: 0 → width: 260px 做展开动画，会触发浏览器重排（reflow），尤其在低端安卓机上明显卡顿甚至闪屏。
真正轻量的方案是只动 transform：
- 侧边栏默认
transform: translateX(-100%)，完全移出视口 - 展开时改为
transform: translateX(0)，GPU 加速，无重排 - 配合
transition: transform 0.3s ease，比 width 动画顺滑得多 - 注意：要给侧边栏加
position: fixed或absolute，否则 translate 不影响文档流，主内容不会“让位”
复杂点在于滚动穿透——侧边栏展开时，背后页面还能滚。这得靠 JS 控制 body { overflow: hidden }，但记得恢复，否则返回后页面锁死。这个细节，90% 的人第一次都漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
