移动端卡片列表布局应单行横向滚动用flex、多行瀑布流用grid；禁用固定高度，用gap或兼容margin控制间距；iOS需加-webkit-overflow-scrolling: touch和transform: translateZ(0)防卡顿。
移动端卡片列表布局的关键不是“怎么堆样式”，而是让卡片在小屏上呼吸得开、滑动得顺、信息看得清。硬套桌面端 grid 或 flex 会直接导致文字挤成一团、点击热区过小、滚动卡顿。
卡片容器用 display: flex 还是 display: grid？
单行横向滚动（如商品推荐栏）必须用 flex；多行瀑布流（如短视频、笔记流）必须用 grid。混用或强行用 flex-wrap: wrap 模拟 grid 瀑布流，会在高度不均时留白错位。
-
flex场景：父容器设overflow-x: auto，子项加flex: 0 0 auto，禁用flex-shrink防压缩 -
grid场景：用grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，配合gap: 8px，避免列宽跳变 - 别给卡片设固定高度——移动端字体缩放、图片加载延迟都会破坏等高假设
移动端卡片间距和留白怎么控制才不踩坑？
用 gap 最干净，但 iOS Safari 15.4 之前不支持；用 margin 容易在首尾多出空白，影响滚动起始位置。
- 现代方案：
gap: 12px+ 父容器padding-inline: 12px，视觉上等于首尾无额外间隙 - 兼容方案：
margin-right: 12px加:last-child { margin-right: 0 }，但需确保卡片 DOM 顺序稳定 - 绝对不要用
justify-content: space-between—— 它会让最后一张卡片贴右，用户拖到末尾时出现“空滑”感
为什么卡片在 iOS 上滑不动或卡顿？
核心是 overflow-x: auto 在 Safari 中默认不触发硬件加速，且触控事件未被正确捕获。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须加
-webkit-overflow-scrolling: touch（仅 Safari 有效） - 给滚动容器加
transform: translateZ(0)或will-change: scroll-position激活 GPU 加速 - 禁用卡片内部的
white-space: nowrap，它会撑宽容器并干扰 flex 行为 - 避免在滚动区域里放未压缩的大图或运行中的 CSS 动画
响应式断点设几个才合理？
只设一个断点就够了：@media (min-width: 768px)。低于这个宽度一律垂直堆叠，高于则按需横排或改网格列数。
- 手机屏下强行并排头像+文字，只会挤压字号、降低可读性
- 480px、640px 等中间断点实测触发率极低，纯属增加 CSS 体积和维护成本
- 卡片内文字用
rem单位（如font-size: 1.125rem），比px更适配系统字体缩放
真正难的不是写出能跑的代码，而是理解每张卡片在不同设备上如何“呼吸”——它的宽高比是否适配竖屏视频，它的点击热区是否大于 44×44px，它的文本是否在缩放后仍保持行高与字重的平衡。这些细节不会报错，但会悄悄把用户体验拉垮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
