本文介绍如何使用 css 媒体查询（@media）动态控制侧边栏的显示与隐藏，确保 quiz 主内容区域在小屏幕或浏览器缩放时不再被挤压，同时兼顾移动端体验与桌面端功能完整性。
本文介绍如何使用 css 媒体查询（@media）动态控制侧边栏的显示与隐藏，确保 quiz 主内容区域在小屏幕或浏览器缩放时不再被挤压，同时兼顾移动端体验与桌面端功能完整性。
在构建响应式网页时，仅依赖固定尺寸（如 padding-left: 260px）或绝对定位极易导致布局崩坏——正如你在缩放浏览器窗口时观察到的：侧边栏持续占用空间，挤压 .quiz_space__content，使题目选项重叠、文字换行异常甚至溢出可视区。解决这一问题的核心不是“移除”侧边栏，而是按视口宽度智能控制其可见性与布局行为。
✅ 推荐方案：媒体查询 + Flex 布局优化
你当前已使用 display: flex 和 flex-direction: row-reverse 构建主容器，这为响应式改造提供了良好基础。只需添加媒体查询，在特定断点（如 ≤768px）下隐藏侧边栏，并让主内容区域占满全宽：
/* 默认桌面端：显示侧边栏 */
.quiz_space {
display: flex;
flex-direction: row-reverse;
}
.side_menu_container {
flex: 0 0 250px; /* 固定宽度，不伸缩 */
max-width: 250px;
background-color: #333;
border: 3px solid #333;
}
.quiz_space__content {
flex-grow: 1;
padding-right: 5px;
}
/* 平板及以下设备：隐藏侧边栏，主内容独占 */
@media (max-width: 768px) {
.side_menu_container {
display: none; /* 彻底隐藏，不占空间 */
}
.quiz_space {
flex-direction: column; /* 垂直堆叠，更符合小屏阅读习惯 */
}
.quiz_space__content {
padding: 15px; /* 补充内边距，提升可读性 */
}
/* 同时优化整体外边距，避免因隐藏侧边栏导致内容紧贴左边缘 */
.whole_doc_edit {
padding-left: 20px;
padding-right: 20px;
}
}? 关键提示：不要用 visibility: hidden 或 opacity: 0 替代 display: none —— 前两者仍占据文档流空间，无法释放宽度，Quiz 区域依然会被“隐形侧边栏”挤压。
⚠️ 其他需同步优化的响应式要点
广告位 padding 不是标准实践：用 padding-left/right: 260px 预留广告位会严重破坏响应式结构。正确做法是使用语义化容器（如 <aside class="ad-slot">）配合 flex 或 grid 布局，并通过媒体查询控制其显示/隐藏或切换为底部横幅。
-
避免全局固定尺寸：img { width: 150px } 在手机上会溢出屏幕。应改为：
img { max-width: 100%; height: auto; } -
Bootstrap 的移动优先原则：你已引入 Bootstrap 5，建议充分利用其响应式工具类（如 d-none d-lg-block 控制元素显隐），而非重复编写媒体查询：
<div class="side_menu_container d-none d-lg-block"> <!-- 侧边栏内容 --> </div>
SNS 按钮的 height: 100vh 风险：.wrapper { height: 100vh } 在小屏下可能导致按钮遮挡内容。推荐改用 position: fixed 或基于内容高度自适应。
✅ 最终效果验证建议
- 打开浏览器开发者工具（F12），切换至「设备模拟器」，依次测试 iPhone SE、iPad、MacBook Pro 等常见尺寸；
- 手动拖拽窗口边缘，观察侧边栏是否在 768px 左右平滑消失，Quiz 内容是否完整铺满且文字清晰可读；
- 检查所有 <input type="radio"> 标签是否仍可点击（隐藏侧边栏后，若 flex-direction: column 导致错位，需微调 margin 或 gap）。
响应式设计的本质不是“适配所有尺寸”，而是在关键断点处提供最优体验。隐藏侧边栏并非妥协，而是对用户注意力与交互效率的尊重——当屏幕变窄，聚焦核心 Quiz 内容，才是真正的用户体验优先。
