flex-wrap在移动端最后一行留白，是因为它只控制换行、不控制剩余项对齐；三列布局下仅两张卡片时默认左对齐而右侧大片空白，space-between等无法解决不满行撑满问题，真正紧凑方案是grid+auto-fit+minmax。
移动端卡片排版不是“缩放PC版”，而是重新组织流式结构、控制视觉密度、堵住溢出漏洞——否则商品卡片错位、文字截断、按钮点不中，都是必然结果。
flex-wrap 为什么在移动端最后一行总留白？
因为 flex-wrap: wrap 只负责换行，不负责对齐剩余项。三列布局下，若只有两张卡片，它们默认左对齐，右边大片空白。
- 用
justify-content: space-between或space-around会拉宽间距，但无法解决“不满一行时撑满”的需求 - 真正紧凑的方案是改用
display: grid，配合grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 这个写法让每张卡片最小 280px，容器够宽就多列，窄了自动收缩为 1 列，且最后一行自动均分宽度，不留空
- 注意：iOS Safari 14.5+ 才完整支持
auto-fit，旧版本需 fallback 到repeat(1, 1fr)+ 媒体查询
图片和输入框为什么一上手机就撑破容器？
这是移动端最常被忽略的两个溢出源，根源在于没设 max-width: 100%。
-
<img alt="HTML卡片排版怎么兼顾移动端" >、<svg></svg>、<video></video>必须统一加：img, svg, video { max-width: 100%; height: auto; } -
<input>、<textarea></textarea>、<button></button>必须设box-sizing: border-box，否则padding: 12px+border: 1px会让width: 100%实际超宽 - 别只给图片加，漏掉
<svg></svg>在微信内嵌浏览器里照样溢出
卡片悬停效果在 iPhone 上为啥完全没反应？
因为 :hover 在绝大多数触屏设备上不触发——手指没有“悬停”状态。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 用
:active也靠不住：它只在touchstart → touchend极短瞬间生效，且仅对原生可交互元素（button、a、input[type="button"]）有效 - 别给
div加role="button"试图骗过浏览器，iOS Safari 和微信 X5 内核直接忽略 - 真要反馈点击状态，得用 JS 控制 class：
touchstart立即加is-pressed，touchend或touchcancel移除 - 过渡属性只选
transform和opacity，避免用height或margin——它们触发重排，低端机卡顿明显
viewport 和 rem 设置错一步，整个卡片就乱套
很多页面在 iPhone 上字体忽大忽小、卡片高度塌陷，问题就出在第一行 meta 和根字体计算上。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">必须写全，漏掉maximum-scale=1.0或user-scalable=no，iOS 双击放大后 flex 高度直接崩 - rem 基准别硬套设计稿的 “750px = 100px”，推荐 JS 动态算：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px'; - 禁止在 CSS 里写死
html { font-size: 20px; }，这会让 414px 宽的 iPhone Plus 上文字过大、卡片内容溢出 - 如果用 px 写
padding却用 rem 写font-size，视觉节奏会断裂——字号缩了，内边距没缩，卡片比例就失衡
复杂点不在代码多难写，而在每个环节都容易漏掉一个约束条件：图片没限宽、输入框没设 box-sizing、viewport 少个参数、transition 用了 margin……这些单独看都不起眼，凑一起就让卡片在真实机型上集体失效。
