响应式卡片布局应使用 display: grid，因其通过 repeat(auto-fit, minmax(280px, 1fr)) 自动适配列数，避免 float 塌陷和 inline-block 间隙问题；配合 object-fit: cover 控制图片裁剪、transform 实现高性能悬停动效，并采用 min-width 断点渐进增强。
卡片容器用 display: grid 而不是 float 或 inline-block
响应式卡片布局的核心是让列数随屏幕宽度自动变化，grid 的 repeat(auto-fit, minmax(...)) 模式能直接解决这个问题，而 float 容易塌陷、inline-block 有空白间隙且难以控制换行逻辑。
关键写法示例：
.card-grid {
display: grid;
grid-gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
注意点：
-
minmax(280px, 1fr)表示每列最小 280px，最大均分剩余空间；小屏下自动收缩为单列 -
auto-fit会合并空轨道，auto-fill则保留空位，多数场景选auto-fit - 别忘了给卡片本身设
min-width: 0，防止内部长文本（如 URL）撑破网格
卡片内图片用 object-fit: cover 统一裁剪比例
不同尺寸的原始图放进固定高宽的卡片容器时，拉伸变形或留白都会破坏视觉一致性。用 object-fit 是最轻量的解决方案，不需要 JS 或额外 wrapper。
立即学习“前端免费学习笔记（深入）”；
典型结构：
.card img {
width: 100%;
height: 180px;
object-fit: cover;
object-position: center;
}
常见坑：
- 只设
width: 100%不设height，object-fit不生效 -
object-position默认是50% 50%，但若想突出人脸，可改用center top - IE 不支持
object-fit，如需兼容，得 fallback 到 background-image +background-size: cover
悬停动效加 transform 和 box-shadow，避免重排
卡片悬停抬升+阴影是最常用效果，但用 top 或 margin-top 会触发 layout，导致卡顿；transform: translateY() 只影响合成层，性能更好。
推荐写法：
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
注意事项：
- 务必给
transition显式声明属性，不要写all，否则字体颜色等意外变化也会被过渡 - 阴影值别太大，
0 4px 12px在移动端已足够，过重的box-shadow会影响滚动帧率 - 如果卡片含
position: absolute子元素，悬停时可能错位，需检查z-index层级
移动端断点用 min-width 而非 max-width 媒体查询
现代响应式开发推荐移动优先，基础样式写默认（小屏），再用 @media (min-width: 768px) 逐步增强。反向用 max-width 容易漏掉中大屏适配，也违背渐进增强逻辑。
实际断点建议：
@media (min-width: 768px) {
.card-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}
@media (min-width: 1024px) {
.card-grid { grid-gap: 2rem; }
}
容易忽略的细节：
- 断点数值别硬编码成
768px，应定义 CSS 变量或预处理器变量统一管理 - 别在断点里重复写整个卡片样式，只覆盖需要变更的属性（如列数、间距、字体大小）
- 真机测试时发现部分安卓浏览器对
100vw解析异常（含滚动条宽度），卡片宽度慎用100vw
