应使用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 配合 gap: 1.5rem 实现响应式自适应列数，避免固定列数导致错位或换行。
卡片列数在平板上突然变少或错位
这不是 Grid 自己出错，而是你用了 repeat(3, 1fr) 或 flex: 0 0 33.33% 这类写死列数/宽度的方案。平板竖屏（如 iPad Air 820px）下，3 列加 padding 后总宽超容器，浏览器只能换行或压缩，导致最后一列掉到下一行、文字被压扁、甚至横向滚动。
正确做法是放弃“固定列数”思维，改用内容驱动的自动计算：
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 容器够宽就多列，窄了就自动减列，每列最小 280px，避免小屏文字糊成一团 - 必须配
gap: 1.5rem，别用margin控制卡片间距，否则末尾行下方会多出一倍空白 - 旧版 Safari（gap，可降级为
grid-column-gap: 1.5rem; grid-row-gap: 1.5rem
卡片内部高度不一致，视觉节奏崩了
Grid 只管列对齐，不管单张卡片里内容长短。描述文字多的卡片拉得很高，少的很矮，用户扫视时视线跳动大——这问题在平板横屏（1024px+）下尤其明显，因为卡片变宽后文字换行更少，高度差反而放大。
解决方法是在卡片内部启用 Flex 布局二次约束：
立即学习“前端免费学习笔记（深入）”；
- 给
.card加display: flex; flex-direction: column; height: 100% - 内容区（如
.card-content）设flex: 1或flex-grow: 1，吸走剩余空间 - 底部按钮区域用
margin-top: auto贴底，别用position: absolute，否则屏幕阅读器无法识别 - 图片必须加
aspect-ratio: 16/9和object-fit: cover，否则加载抖动会触发重排，等高失效
平板断点值设成 768px 就够了吗？
不够。iPad Air 竖屏是 820px，Surface Pro 是 1080px，很多安卓平板竖屏超 900px——全被 @media (max-width: 768px) 漏掉了，结果它们既没套手机样式，也没进平板规则，直接按桌面默认渲染，字体小、按钮挤、侧边栏消失。
应该用渐进增强 + 内容驱动的断点：
- 基础样式（手机）不写媒体查询，直接设
width: 100%、font-size: 1rem、padding: 0.75rem - 平板起始断点用
@media (min-width: 768px)，覆盖竖屏 iPad 和大屏安卓平板 - 再加一层
@media (min-width: 1024px)处理横屏平板和小桌面，比如把卡片从单列堆叠改为双列，或让操作按钮从底部浮层移到右上角 - 断点值别抄设备列表，拖动浏览器窗口，观察卡片何时开始显得太窄、文字何时换行异常，那个宽度就是你的真实断点
悬停动效在平板上卡顿或不生效
平板没有 hover 状态，但部分浏览器（尤其是 Chrome on Android）会在点击后短暂模拟 :hover，如果动效依赖 top、margin-top 这类触发布局（layout）的属性，就会掉帧甚至卡死。
只允许用 GPU 加速的属性做交互动效：
-
transform: translateY(-4px)替代margin-top: -4px -
opacity: 0.9替代visibility: hidden - 必须显式声明
transition: transform 0.2s ease, opacity 0.2s ease，部分 Chrome 版本不写transition会有延迟 - 别在
@media (hover: hover)里包裹 hover 样式——它在 iPadOS 上不可靠，真机测试常失效
