移动端卡片布局必须用 display: grid 或 flex，禁用 float/inline-block；推荐 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))，图片需 object-fit: cover + aspect-ratio 兜底，卡片须自包含、去 margin、用 gap 控制间距。
卡片容器必须用 display: grid 或 display: flex，不能靠 float 或 inline-block
移动端卡片一旦用 float 或硬写 width: 50%，就会在小屏上错位、溢出或留白异常。现代方案只依赖 grid 或 flex 的流式行为，配合 gap 控制间距，避免手动计算 margin。
常见错误现象：
- 卡片在 iPhone SE 上只显示一列，但右侧留大片空白
- 横屏时卡片突然“塌陷”成单列，失去预期的两列布局
- 图片高度不一致导致卡片底部对不齐
实操建议：
- 父容器统一设
display: grid，用grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))—— 这比媒体查询更可靠，240px是 iPhone SE 屏宽减去左右 padding 后的可用宽度下限 - 若需兼容 iOS 15.4 以下 Safari，把
auto-fit换成auto-fill，否则部分旧版会渲染为空白 - 卡片内图片必须加
object-fit: cover和固定宽高比容器（如aspect-ratio: 4/3），否则拉伸变形或撑开卡片
minmax(240px, 1fr) 中的 240px 不是拍脑袋定的
这个值直接决定最小列宽能否在窄屏下稳定呈现。设太小（如 180px），文字换行频繁、按钮被截断；设太大（如 320px），iPhone 13 mini 竖屏只能塞下一列，浪费空间。
实操建议：
- 以
device-width - 2 × padding为基准：主流手机 viewport 宽度是 375px / 414px，减去左右各 16px padding 后，剩余 343px / 382px；除以 2 列得 ~170–190px，再加 50px 余量，取整为240px更稳妥 - 如果卡片含操作按钮（如“加入购物车”），确保按钮文字在
240px内能完整显示，可临时加font-size: 0.875rem配合white-space: nowrap - 不要用
em或rem替代px，移动端视口缩放会导致计算偏差，px在现代设备上已足够可靠
卡片自身要“自包含”，不能依赖外部容器重置样式
所谓自包含，是指每张卡片内部能控制自己的尺寸、阴影、圆角和悬停行为，不靠父容器统一设置 margin 或 border。否则在不同网格密度下（比如从 2 列变 1 列），卡片边缘会出现重复间隙或阴影重叠。
实操建议：
- 卡片根元素设
border-radius: 12px、overflow: hidden、box-shadow: 0 2px 8px rgba(0,0,0,0.08)，所有视觉边界由自身承担 - 移除卡片的
margin，改用父容器的gap: 16px统一控制间距 —— 这样换列时不会出现“最后一行右边多一个 margin”的经典 bug - 悬停动效只作用于
transform: translateY(-2px)和box-shadow，避免触发布局重排（height或margin变化）
iOS Safari 的 aspect-ratio 兼容性需要兜底
虽然 aspect-ratio: 4/3 能让图片容器自动维持比例，但 iOS 15.4 之前版本不支持，会导致图片区域高度坍塌或撑开整个卡片。
实操建议：
- 用伪元素 + padding-bottom 技巧兜底：
.card__image::before { content: ""; display: block; padding-bottom: 75%; }，再把图片设为position: absolute覆盖其上 - 或者直接用内联
style="aspect-ratio: 4/3"，配合 JS 检测CSS.supports('aspect-ratio', '1/1')动态降级 - 切勿用
height: 0; padding-bottom: 75%配合绝对定位后忘记设position: relative在父容器上 —— 这是移动端卡片图片错位最常被忽略的一环
实际项目里，最难调的往往不是大屏适配，而是 iPhone 12 mini 和 SE 第三代这种窄屏设备上，gap 和 minmax 的微小偏差会让卡片排列突然“跳变”。建议在真机调试时，把 gap 设为 12px 起步，再逐步加到 16px，同时观察三列变两列的临界点是否自然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
