在768px–1024px平板断点下，通过min-width媒体查询配合flex布局使侧边栏默认常驻显示，禁用JS控制、优先CSS实现，兼顾可访问性与平滑过渡。
在 H5 页面中，让平板端（如 768px–1024px 宽度）的侧边导航自动展开，关键不是“强制展开”，而是通过媒体查询配合合理的 DOM 结构与 CSS 控制，使导航在该断点下默认可见、不折叠。这需要兼顾用户体验（避免遮挡内容）和交互逻辑（不依赖 JavaScript 也能生效）。
使用 min-width + flex 布局实现“自然展开”
平板宽度通常介于桌面和手机之间，建议以 768px 为下限触发侧边栏常驻显示：
- 确保 HTML 中侧边栏（如
<aside class="sidebar"></aside>）与主内容（<main></main>）同级，且未被 JS 默认隐藏 - 基础 CSS 设置侧边栏默认为隐藏（针对手机），例如：
.sidebar { display: none; } - 在媒体查询中重置显示方式，并用 flex 布局并排呈现：
@media screen and (min-width: 768px) {
.sidebar {
display: block;
width: 260px; /* 固定或 max-content */
}
.container {
display: flex;
}
.container > .sidebar {
flex-shrink: 0;
}
.container > main {
flex: 1;
}
}避免 JS 干预，优先用 CSS 控制状态
若当前导航依赖 JavaScript 控制显隐（如点击汉堡菜单切换 active 类），需调整逻辑：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在平板及以上断点，移除对
.sidebar.active的依赖，直接让.sidebar在该范围始终生效 - 可借助
@media覆盖 JS 添加的内联样式或类名，例如：@media (min-width: 768px) { .sidebar { display: block !important; } }（仅在必要时使用 !important） - 若使用 CSS 自定义属性控制开关，可在媒体查询中重设变量值，如：
:root { --sidebar-show: 0; } @media (min-width: 768px) { :root { --sidebar-show: 1; } }，再配合display: var(--sidebar-show, 0) == 1 ? 'block' : 'none'（注意：CSS 不支持三元运算，需搭配display: block和display: none分别声明）
适配不同平板方向与分辨率
部分 iPad 竖屏为 768px，横屏达 1024px；安卓平板差异更大。推荐组合写法：
- 用
min-width: 768px覆盖主流竖屏平板 - 补充
and (orientation: landscape)处理横屏场景，例如：@media screen and (min-width: 768px) and (orientation: landscape) - 若需更精准控制，可叠加
max-width: 1200px防止在小桌面误触发，形成：@media screen and (min-width: 768px) and (max-width: 1200px)
辅助可访问性与过渡体验
自动展开不等于“突兀出现”，应保障平滑与可用性：
- 给侧边栏添加
transition: transform 0.3s ease或opacity，并在媒体查询中启用（注意：display无法过渡，改用visibility + opacity或transform: translateX()） - 确保键盘用户能聚焦到导航链接，平板模式下不要禁用
tabindex或focus样式 - 若页面有“关闭侧边栏”按钮，应在平板媒体查询中隐藏该按钮，避免干扰
