手机端适配核心是小屏幕下针对性调整布局，用max-width媒体查询（如768px）、viewport元标签、容器/文字自适应、display显隐切换等渐进优化。

用媒体查询做手机端适配，核心是“在小屏幕下改变布局”，不是重写整套样式，而是针对性调整容器宽度、字体大小、隐藏/显示元素、切换为竖排等。关键在于抓住几个最常改的点，一步步来。

用 max-width 定义手机断点

主流做法是用 max-width 判断设备最大宽度，比如：

• 常见断点：768px（平板窄屏）、480px 或 375px（手机主流宽度）
• 推荐写法：@media screen and (max-width: 768px) { ... }
• 别用 device-width，它受缩放和横竖屏影响，不稳定

让页面能缩放、不横向滚动

光写 CSS 不够，HTML 的 viewport 元标签必须加：

DeepBI DHTML 页面生成器

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

下载

• 缺了这句，手机浏览器会按桌面宽度渲染，内容被压缩，还可能出现横向滚动条
• 不要加 user-scalable=no，影响可访问性

优先改容器和文字，别一上来就调 flex

初级项目常见结构是 header + main + footer，先确保它们在手机上不溢出：

立即学习“前端免费学习笔记（深入）”；

• 把固定宽的 width: 1200px 改成 width: 100% 或 max-width: 100%
• 给图片加 max-width: 100%; height: auto;，防止撑破容器
• 标题字号从 32px 降到 24px，正文字号从 16px 调到 15–16px（太小难读，太大占屏）

用 display 切换显隐，比重排更简单

手机屏窄，有些内容可以暂时隐藏或挪位置：

• 侧边栏在手机上设为 display: none;
• 导航菜单收起，用 display: flex; flex-direction: column; 垂直堆叠
• 图标按钮替代文字链接，省空间（但要有 aria-label 说明功能）