响应式价格卡片必须用 grid 而不是 flex，因其二维结构需同时控制行列布局；flex 一维特性导致多行等高、换行错位等问题，而 grid 通过 grid-template-areas 和 auto-rows 保障跨断点视觉统一。
响应式价格卡片为什么必须用 grid 而不是 flex
因为价格卡片通常有明确的二维结构：横向排列多个卡片（列），纵向分层（标题、功能列表、价格、按钮）。flex 擅长一维布局，强行用它做多行等高对齐或跨断点重排，容易出现高度不一致、align-items 失效、换行后子项错位等问题。而 grid 的 grid-template-areas 和 grid-auto-rows 能天然保证同组卡片在不同断点下保持视觉节奏统一。
实操建议：
- 主容器设
display: grid，用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))实现“最小宽 280px，填满即分栏” - 每个卡片内部也用
display: grid，定义grid-template-rows: auto 1fr auto auto，让功能列表区域自动撑高，按钮始终底对齐 - 避免在卡片内用
flex-direction: column+height: 100%——父容器没显式高度时，这招在 Safari 下常失效
Media-query 断点怎么设才不翻车
别按设备尺寸硬套 768px / 1024px。真正该看的是卡片实际宽度是否被挤压变形。比如当 minmax(280px, 1fr) 算出单列宽度
实操建议：
- 只设两个断点：
@media (max-width: 767px)（切单列）和@media (max-width: 479px)（压缩内边距、调小字体） - 在
max-width: 767px下，把网格列数强制改为1，同时给卡片加width: 100%——否则某些安卓浏览器会保留旧列宽导致溢出 - 慎用
em或rem写断点值，移动端缩放后可能触发错误断点；坚持用px
价格数字对齐和单位分离的 CSS 写法
“¥99”和“¥1999”长度不同，直接左对齐会让价格区看起来参差。但用 text-align: right 又会导致货币符号飘走。真正的解法是结构分离 + 网格控制。
实操建议：
- HTML 中把价格拆成两部分：
<span class="price-amount">1999</span><span class="price-unit">¥</span> - CSS 里用
display: grid; grid-template-columns: auto max-content，再配合justify-content: end让数字右对齐、单位紧贴数字左侧 - 不要给
.price-unit设margin-left: -4px—— 高分屏下像素对不准，单位会虚化
悬停动效与无障碍访问的冲突怎么解
:hover 卡片抬升 + 阴影加深很常见，但在触摸设备上无效，且对键盘用户不友好（tab 切换时无反馈）。单纯加 :focus-within 也不行——卡片内若没可聚焦元素（如按钮没加 tabindex），焦点根本进不去。
实操建议：
- 卡片容器加
tabindex="0"，确保能被键盘聚焦 - 用
&:hover, &:focus-within同时声明动效，别漏掉后者 - 阴影变化用
transform: translateY(-4px)+box-shadow，别只改box-shadow——纯阴影变化在低端安卓上会有明显闪烁 - 动效时长统一设
transition: all 0.2s ease，超过 0.3s 用户会觉得卡顿，低于 0.15s 又察觉不到变化
max-width 的计算时机、以及触摸设备对 :hover 的模拟策略，这三处最容易被忽略。改一处，最好连着另外两处一起验证。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
