响应式布局应移动端优先，侧边栏默认隐藏，通过@media (min-width: 992px)在PC端显示并配合Grid/Flex布局；避免max-width误匹配大屏手机，优先用纯CSS而非JS控制。
在 H5 页面中，用媒体查询隐藏 PC 端侧边栏、仅保留移动端核心内容，关键不是“隐藏”，而是“按设备特性做响应式布局切换”。重点在于：侧边栏默认不渲染或设为不可见，再通过媒体查询在宽屏下主动显示它。
推荐做法：移动端优先，PC 端显式启用侧边栏
避免在 HTML 中同时塞入 PC 和移动结构再靠 display: none 切换，易导致移动端加载冗余 DOM 和样式。更优方式是：
- HTML 结构只保留移动端必需内容（如主内容区、底部导航）
- 侧边栏用
display: none默认隐藏（或 JS 动态插入，按需加载） - 用
@media (min-width: 768px)或更合理的断点（如992px）在 PC 宽度下设为display: block或flex
常用断点与写法示例
以主流框架常见断点为例（适配平板及以上）：
@media (min-width: 992px) {
.sidebar {
display: block;
}
.main-content {
margin-left: 240px; /* 配合侧边栏宽度 */
}
}注意：不要用 max-width 做移动端隐藏——容易被大屏手机（如 iPhone Plus/Pro Max）误匹配；min-width 更可靠，明确“≥某宽度才显示”。
进阶建议：配合 CSS Grid / Flex 布局自动适配
比单纯显示/隐藏更健壮的方式是用现代布局控制流：
- 移动端：主内容独占整行，
display: block - PC 端：用
display: grid或display: flex构建两栏，侧边栏自动撑开 - 例如：
grid-template-columns: 240px 1fr;+@media控制该规则生效时机
补充提醒：避免 JS 强干预，优先用纯 CSS 响应
除非有复杂交互逻辑（如折叠/展开），否则不建议用 JS 监听 resize 去 toggle 类名。CSS 媒体查询由浏览器原生优化，性能更好、无闪动、兼容性稳定（iOS Safari / Android Chrome 均支持良好）。若需兼容老版本安卓 WebView，可加 -webkit- 前缀，但通常非必需。
