直接用HTML表格写价格对比会出问题，因表格语义不符（套餐是并列选项而非行列关系）、无法响应式重排（小屏横向溢出）、可访问性差（屏幕阅读器逐行读而非横向对比）。
为什么直接用 HTML 表格写价格对比会出问题
响应式价格卡片表格最常犯的错，是把 <table> 当成“视觉表格”硬套——结果在小屏上横向溢出、文字挤成一团、colspan 和 rowspan 在移动端根本没法对齐。CSS Grid 或 Flexbox 不是“更炫的写法”，而是唯一能真正解耦「语义结构」和「视觉布局」的方式。
- 语义上，套餐是并列选项，不是行列关系，
<div>+ ARIArole="region"比<table>更准确 - 视觉上，需要在桌面端横排（grid-template-columns: repeat(3, 1fr)）、平板断点堆叠为两列、手机强制单列——
<table>无法响应式重排 - 可访问性上，屏幕阅读器会逐行读
<table>，但用户只想横向对比「基础版 vs 专业版」的某一项（比如「支持邮箱数」），不是按行扫
用 CSS Grid 实现三档套餐横向对比的最小可行结构
核心是放弃 <tr><td>，改用语义化分组：每个套餐一个 <section class="plan">，每项参数一个 <div class="feature">，再用 Grid 控制对齐。
<div class="pricing-grid"> <div class="plan-header">基础版</div> <div class="plan-header">专业版</div> <div class="plan-header">企业版</div> <p><div class="feature-label">月费</div> <div class="feature-value">$9</div> <div class="feature-value">$29</div> <div class="feature-value">$79</div></p><p><div class="feature-label">邮箱数</div> <div class="feature-value">5</div> <div class="feature-value">20</div> <div class="feature-value">不限</div></p><p><div class="feature-label">技术支持</div> <div class="feature-value">邮件</div> <div class="feature-value">邮件+聊天</div> <div class="feature-value">7×24 电话</div> </div>
对应 CSS 关键点：
-
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }—— 初始三列均分 -
.plan-header { grid-column: span 1; }确保标题只占一列（避免被 feature-label 拉宽） - 小屏下加
@media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } }，自动变单列滚动（或加overflow-x: auto防溢出） - 注意：不要给
.feature-value设固定宽度，否则破坏响应式；用min-content或fit-content让内容撑开
“高亮推荐套餐”时最容易忽略的 CSS 陷阱
很多方案用 transform: scale(1.05) 或 box-shadow 突出中间卡片，但会导致：
立即学习“前端免费学习笔记（深入）”；
- 父容器
grid仍按原始尺寸分配空间，造成左右卡片“被挤压”或留白异常 -
z-index失效（Grid 子项默认不创建新层叠上下文） - 悬停动画在 Safari 上闪动（需强制硬件加速）
正确做法是：
- 用
position: relative+top: -10px往上提，同时给该卡片加z-index: 2 - 为防父容器高度塌陷，给
.pricing-grid加align-items: start - 悬停动画只动
transform和box-shadow，且必须配will-change: transform - 手机端禁用悬停效果：
@media (hover: none) { .plan:hover { transform: none; } }
字体大小与间距在不同设备上的实际适配逻辑
别信“统一用 rem”。价格卡片里数字（如 $29）和文字（如 7×24 电话）对可读性敏感度完全不同：
- 标题和价格数字需在手机上至少
18px（iOS 最小可点击尺寸），不能靠缩放 - 特征描述文字可以略小（
14px），但行高必须 ≥1.5，否则多行堆叠看不清 - 卡片内边距用
clamp(16px, 4vw, 24px)，比媒体查询更平滑
关键细节：
-
font-weight: 700对价格数字比600更易识别，尤其在 OLED 屏幕上 - 避免用
letter-spacing拉宽美元符号（$），它本身字形窄，拉宽后和数字间距不均 - 手机竖屏时，如果总高度超 viewport，用户会误以为“没加载完”，所以建议限制最大行数（用
display: -webkit-box截断）
真正难的不是写出三列网格，而是让「$79」在 iPhone SE 屏幕上和「不限」两个字在视觉权重上平衡，又不牺牲可访问性。这得反复在真机上测触摸热区、缩放行为、语音朗读顺序——工具链再全，也绕不开这点。
