直接写 grid-cols-3 在手机上崩塌是因为其生成的三列布局不考虑内容适配，小屏强制并排导致文字缩微、图表压扁、卡片塌陷；须配合响应式断点如 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3，并确保 viewport 标签正确、父容器设最小高度及合理使用 flex-1。
为什么直接写 grid-cols-3 在手机上会崩
因为 grid-cols-3 生成的是 grid-template-columns: repeat(3, minmax(0, 1fr))，它只按份数分，不看内容能不能塞下。小屏强行三列并排，文字缩到 8px、图表被压扁、卡片高度塌成一条线——这不是 bug，是预期行为。
必须配合断点前缀渐进增加列数：grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4。注意两点：
-
grid类必须显式写在父容器上，Tailwind 不自动补display: grid - 列数不是越多越好：手机端坚持
grid-cols-1，哪怕内容少也别用sm:grid-cols-1，否则小屏可能意外触发 sm 断点（比如 iPhone SE 的 375px 宽度刚好卡在 sm 起点） - 想让列宽“自适应内容”？用
grid-cols-[repeat(auto-fit,minmax(300px,1fr))]，比一堆断点更抗缩放和横竖屏切换
卡片内容在小屏上重叠或截断怎么办
常见现象：数字指标变小不可读、ECharts 图表容器空白、按钮点不到——根源常是父容器没设最小高度，或子元素用了 position: absolute 脱离文档流。
实操建议：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 卡片加
min-h-[200px]（不是h-48），避免小屏下高度塌缩导致文字上下重叠 - 图表容器用
h-full前，确保父级有明确高度：卡片加flex flex-col，图表盒加flex-1 - 字体别跳变：
text-xl sm:text-2xl lg:text-3xl比text-base md:text-4xl更平滑；避免从 14px 直跳 32px - 禁用
user-scalable=no——它会让 iOS 双击放大失效，反而阻碍可读性
侧边栏折叠逻辑总出 bug 的真实原因
典型错误写法：hidden sm:block lg:hidden。问题在于 hidden 是 display: none !important，它会覆盖后续所有断点类的 display 声明，结果侧边栏在所有尺寸都消失。
正确做法只用两个状态：
- 移动端优先：写
hidden md:block（默认隐藏，≥768px 显示） - 折叠按钮本身要响应式：
md:hidden，而不是hidden md:block，否则按钮在桌面也显示 - 需要“仅桌面显示”？
hidden md:block已足够，lg:block是冗余的 - 如果用了自定义断点（如
desktop: '1440px'），记得检查tailwind.config.js是否还保留xl；删了就真没xl:这个前缀
viewport 标签写错，其他所有适配都白搭
这是最常被忽略的底层前提。没写对 <meta name="viewport">，所有 @media 和 Tailwind 断点类都会失效。
必须满足这四条：
- 只写这一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 删掉
maximum-scale、minimum-scale、user-scalable——它们破坏可访问性 - 不要写死宽度，比如
width=375或width=1200；device-width才是动态取设备物理视口 - 这个标签必须放在
最前面，不能靠 JS 动态插入
真正难的不是写多少断点，而是让每张卡片在 320px 宽的屏幕上，依然能看清关键数字、点中操作按钮、不出现横向滚动条——这些细节藏在 min-h-、flex-1 和 viewport 的那一行里。
