移动端响应式媒体查询应优先使用宽度断点（如320px、375px、414px、415px），避开不稳定的height判断，单独处理orientation，并为平板（≥768px）定向优化布局与交互，rem方案中仅调整html font-size。
移动端和平板设备的响应式媒体查询，核心是用宽度断点精准区分设备类型，避免混用高度、不盲目堆叠断点，同时兼顾设计稿逻辑与真实设备视口特性。
优先使用宽度断点，避开高度陷阱
移动端浏览器地址栏会随滚动动态收起或展开，导致 window.innerHeight 剧烈变化，用 max-height 或 min-height 判断极易误触发。而设备宽度（逻辑像素）稳定可靠：
- iPhone SE / 8 是 375px 宽，iPhone X/13 Pro 是 414px，iPad mini 约 768px
- 所有主流手机宽度集中在 320px–414px，平板从 768px 起跳
- 横屏时宽高互换，应单独用
orientation: landscape处理，而非靠高度“猜”设备
推荐 3–4 个实用宽度断点组合
覆盖 95% 移动端场景，维护简单、不易冲突：
-
@media screen and (max-width: 320px)—— 兼容老旧小屏机型（如 iPhone 5） -
@media screen and (min-width: 321px) and (max-width: 375px)—— 主流小屏手机（iPhone SE、8） -
@media screen and (min-width: 376px) and (max-width: 414px)—— 全面屏主力机（X / 11 / 13 Pro） -
@media screen and (min-width: 415px)—— 平板、折叠屏展开态、大屏手机横屏等
注意：别用 max-width: 768px “一刀切”标定“所有手机”，它会把 iPad mini 也纳入，造成文字过小、按钮难点。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
针对平板做定向增强（非简单放大）
平板不是“大号手机”，需结合尺寸与使用场景优化体验：
- 用
@media (min-width: 768px) and (orientation: portrait)单独处理竖屏平板，比如增大行高、放宽边距 - 搭配
@media (min-width: 768px) and (orientation: landscape)优化横屏布局，例如改单列内容为双栏展示 - 避免仅靠字体放大，重点调整容器宽度、栅格列数、交互热区尺寸（按钮最小 44×44px）
配合 rem 布局时，媒体查询只调根字号
如果项目采用 rem 基于 html font-size 的方案，媒体查询的作用不是重写整套样式，而是校准基准：
- 每个断点内直接设置
html { font-size: XXpx; } - 按宽度从小到大顺序书写，利用 CSS 层叠自然覆盖（窄屏规则在前，宽屏在后）
- 例如：320px 断点设
font-size: 12px，375px 设14px，414px 设16px，确保 1rem 在各设备上视觉一致
