必须加viewport元标签，否则iOS Safari等会以980px宽度缩放渲染，导致文字过小、按钮错位；Bootstrap 5栅格采用移动优先，.col-全局生效，.col-md-仅≥768px生效，侧边栏推荐.col-12.col-lg-3组合，小屏折叠需配合matchMedia与transform动画，禁用user-scalable=no以保障无障碍访问。

直接用 Bootstrap 5 的栅格系统 + 移动优先类名，配合 viewport 元标签和语义化 HTML 结构，就能跑通 90% 的响应式后台模板需求。手写媒体查询不是不行，但容易漏断点、难维护，不推荐从零堆 CSS。

为什么必须加

没这行，iOS Safari 和安卓 Chrome 会把你的后台当桌面站渲染，强行缩放到 980px 宽再显示，结果文字小得看不清、按钮点不准、侧边栏错位——所有“手机上打不开”的问题，八成卡在这儿。

• content="width=device-width, initial-scale=1" 是底线，不能少也不能改
• 别加 user-scalable=no，禁缩放会破坏无障碍访问（比如视力障碍用户需要放大）
• 如果用了 Web App Manifest 或 PWA，还得补上

.col-* 和 .col-md-* 类名到底怎么选

Bootstrap 5 的断点是移动优先的：.col-6 在所有尺寸生效；.col-md-4 只在 ≥768px 时才起作用。后台最常踩的坑是混用逻辑，比如在侧边栏里写 .col-12 .col-lg-3，结果小屏下宽度还是 12 列，大屏却只占 3 列，留出大片空白。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 主布局推荐：顶部导航用 .container-fluid + .row，侧边栏+内容区用 .col-12 .col-lg-3 / .col-12 .col-lg-9
• 表格页慎用 .col-sm-*，小屏下表格列太多会横向溢出，改用 .table-responsive 包一层
• 表单控件统一用 .col-12 .col-md-6 .col-xl-4 三级控制，避免中屏挤成两列、大屏又太散

侧边栏在小屏下怎么收起来不崩

纯 CSS 隐藏 .sidebar 不够，得配合 JS 控制 DOM 状态，否则屏幕缩放或横竖屏切换时状态错乱。用 matchMedia 比监听 resize 更准，且不会频繁触发。

• 小屏默认折叠：给
  加 data-bs-toggle="collapse" 和 data-bs-target="#sidebarCollapse"
• 用 window.matchMedia("(max-width: 767.98px)").matches 判断是否该初始化折叠态
• 别用 display: none 硬隐藏，改用 transform: translateX(-100%) + transition，动画更自然
• 抽屉打开时，记得给 加 overflow: hidden，防止滚动穿透

真正难的不是让页面“看起来能缩放”，而是保证操作流在不同设备上不中断——比如手机点开菜单后，手指要能准确触达二级项，而不是误点到隔壁卡片；表格里“编辑”按钮在小屏必须足够大，且不能被虚拟键盘顶走。这些细节没法靠框架自动解决，得在真机上反复点、拖、缩放验证。