小屏卡片错位或溢出主因是视口控制缺失与弹性容器响应边界不当，具体表现为width固定、min-width过大、flex-wrap未启用；应改用clamp()自适应宽度，配合aspect-ratio、line-clamp和contain优化性能。
小屏下卡片错位或溢出的常见原因
卡片在手机上堆叠混乱、内容被截断、左右滑动才能看清，通常不是 CSS 写错了，而是忽略了视口控制和弹性容器的响应边界。关键问题集中在 width 固定值、min-width 过大、以及 flex-wrap 未启用这三点。
-
max-width: 300px这类写死的宽度在 iPhone SE 屏幕（375px 宽）下反而导致卡片撑满又留白过多 - 父容器用了
display: flex但没加flex-wrap: wrap，卡片强行单行排列，直接溢出视口 - 图片或标题用了
white-space: nowrap或font-size: 1.2rem未随屏幕缩放，文字顶破卡片边界
用 clamp() 替代固定 width 和媒体查询
不用为每个断点写 @media，用 clamp() 让卡片宽度在合理区间内自适应：最小不小于 280px（保证可读），最大不超过 100%（避免横滚），中间用 24vw 做流体基准。
article.card {
width: clamp(280px, 24vw, 100%);
margin: 0.5rem;
}
注意：iOS Safari 13.4+ 才完全支持 clamp()，如需兼容更老版本，可 fallback 到 width: 100% + max-width: 320px。
图片与文字的防溢出组合策略
卡片里最常破布局的是图片拉伸和长文本撑开容器。不能只靠 object-fit: cover，得配合容器约束和文本截断逻辑。
立即学习“前端免费学习笔记（深入）”；
- 图片外层加
aspect-ratio: 4/3，再设overflow: hidden，避免不同尺寸图源导致高度突变 - 标题用
line-clamp: 2+display: -webkit-box截两行，同时补上word-break: break-word防止超长英文单词溢出 - 避免对
padding使用rem单位——小屏下根字体缩小时，1rem可能只剩 12px，内边距过小导致拥挤
触摸滚动卡顿的隐藏诱因
卡片列表在 iOS 上滑动卡顿，往往不是 JavaScript 造成的，而是 CSS 合成层触发不当。尤其当卡片加了 box-shadow 或 transform: translateY(0) 这类强制提升图层的操作，却没配 will-change: transform 或限制层级数量。
实操建议：
- 把
box-shadow改成filter: drop-shadow()，后者在移动端合成效率更高 - 如果卡片有 hover 动画，小屏设备应通过
@media (hover: none)关闭，避免伪类残留触发重绘 - 超过 20 张卡片时，务必用
contain: layout style paint给每张卡片加隔离，防止滚动时全量重排
真正难调的从来不是“怎么让它显示”，而是“怎么让它不抢主线程”。卡片越轻量，小屏体验越稳。
