CSS Grid 三栏自适应价格表应使用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 实现列数自动响应，配合语义化价格结构、flex 对齐、@media (hover: hover) 动效控制、clamp() 根字体及 tabular-nums 等宽数字，确保真正响应式与可访问性。
用 CSS Grid 实现三栏自适应价格表，不依赖框架
纯 HTML + CSS 就能做出真正响应式的价格表，关键不是“加 media query”，而是从布局模型选对起点。CSS Grid 天然支持列数动态收缩，比 float 或 inline-block 更可靠。
常见错误是先写死三列，再用 @media 强行堆叠——结果在 768px 和 480px 之间出现错位或文字溢出。正确做法是让 Grid 自动决定列数：
- 桌面端：定义
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，自动填满容器，最少每列 300px - 平板竖屏（约 600–767px）：Grid 自动缩为两列，无需额外断点
- 手机：自然退化为单列，
minmax(300px, 1fr)中的300px会被忽略（因容器更窄），实际按1fr占满全宽
注意：auto-fit 和 auto-fill 行为不同——auto-fit 会合并空轨道，确保内容撑开列宽；auto-fill 则保留所有可能轨道，容易导致空白列。
价格数字对齐必须用 CSS 而非空格或 br
很多人用 或手动换行让“¥”和数字对齐，这在响应式下必然崩坏。真正稳定的方式是把价格拆成语义化结构 + Flex 控制对齐。
立即学习“前端免费学习笔记（深入）”；
示例结构：
<div class="price"> <span class="currency">¥</span> <span class="amount">299</span> <span class="unit">/月</span> </div>
对应样式：
-
.price { display: flex; align-items: baseline; }—— 基线对齐，避免“¥”上浮 -
.currency { font-size: 0.8em; margin-right: 0.2em; }—— 缩小符号并留白 -
.amount { font-weight: bold; font-size: 1.5em; }—— 突出数字
这样即使字体随屏幕缩放，相对位置也不会偏移；而用空格或 <br> 在小屏下极易造成换行错乱。
hover 动效在触摸设备上会残留，要加 @media (hover: hover)
给价格卡片加 :hover 放大或阴影很常见，但在 iPad 或 Android 平板上，第一次点击后状态常卡住，用户以为点了没反应。
安全做法是包裹媒体查询：
@media (hover: hover) {
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
}
这个查询只在设备同时支持悬停（hover）且当前处于悬停状态时生效。iOS Safari、Chrome on Android 都识别该特性，能准确排除纯触摸场景。
别用 @media (pointer: coarse) 替代——它只判断指针精度，无法区分“有 hover 能力但当前未 hover”和“根本无 hover 能力”。
字体单位用 rem 而非 px，但根字号不能固定设为 16px
直接写 font-size: 16px 在 iPhone 上文字会过小；设 html { font-size: 100% } 又无法响应缩放。折中方案是：
- 基础层：设
html { font-size: clamp(14px, 2.5vw, 16px); }—— 小屏取 14px，大屏封顶 16px，中间按视口宽度平滑过渡 - 组件内：所有文字用
rem，如font-size: 1.2rem，这样缩放逻辑由根元素统一控制 - 禁用
text-size-adjust: none—— 它会阻止用户双指放大的意图，违反可访问性要求
特别注意：Safari 在 iOS 上对 clamp() 支持良好，但旧版 Android WebView 可能不支持。如需兼容，可用 JS fallback 或降级为 max(14px, min(2.5vw, 16px))（部分版本支持）。
最易被忽略的是「价格表里的数字必须保持等宽数字（tabular-nums）」，否则 1 和 0 宽度不同，多行价格对不齐。加一句 font-variant-numeric: tabular-nums; 就能解决。
