语义正确优先选 <dl>，因<dt>和<dd>明确表达商品名与价格的一对一定义关系，比<div>更利于无障碍访问和SEO，而<table>用于二维数据，不适用。
价格牌用 <div> 还是 <dl> 更合适？
直接说结论：语义正确优先选 <dl>（定义列表），尤其当价格对应明确商品名时。浏览器和读屏器能识别 <dt>（术语）和 <dd>（定义）的逻辑关系，比一堆 <div> 更可靠。
常见错误是用 <table> 做价格牌——它本意是展示二维数据，而单个商品+价格是一对一关系，不是表格结构。用 <table> 会导致语义混乱、缩放时错位、无障碍支持差。
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 单个价格牌（如门店橱窗）：用
<div class="price-tag">完全没问题，简洁可控 - 多个并列价格项（如菜单、价目表）：用
<dl>，每个<dt>放商品名，<dd>放价格 - 避免嵌套过深：别在
<dt>里再套<div>或<p>，保持扁平
响应式断点怎么设才不卡顿？
价格牌最常出问题的地方不是“怎么变小”，而是“什么时候变”——断点设在 768px 或 992px 这类通用值，往往和实际内容撑开宽度不匹配，导致文字突然换行、价格符号错位。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是基于内容本身设断点，比如用 min-width: 30em（约 480px）起效，因为 em 相对于当前字体大小，比像素更适应缩放和不同设备默认字号。
实操建议：
- 先写移动端样式（无媒体查询），让价格牌在小屏上竖排、字号适中、留白足够
- 用
@media (min-width: 30em)开始加横向布局，比如<dt>和<dd>改为display: inline-block - 避免用
max-width媒体查询：它容易和父容器冲突，尤其嵌套在 CMS 或框架里时 - 测试关键节点：iPhone SE（375px）、iPad 竖屏（768px）、常见安卓折叠屏（~540px）
font-size 用 rem 还是 vw？
用 vw 最容易翻车：100vw 是视口宽度，但价格牌通常有左右 padding 或 margin，font-size: 5vw 在窄屏下可能把文字撑出容器，且 iOS Safari 对 vw 的渲染有延迟。
rem 更可控，前提是根字体大小设得合理。别直接写 html { font-size: 16px } —— 这会覆盖用户系统设置，影响可访问性。
实操建议：
- 保留用户默认字号：不设置
html的font-size，直接用1.2rem、1.5rem等相对值 - 需要大号标题？用
font-size: clamp(1.2rem, 4vw, 2.5rem)—— 这是目前兼容性好、效果稳的组合 - 价格数字部分可单独加大：
.price-tag .amount { font-size: clamp(1.8rem, 6vw, 3.2rem); } - 避免对
<sup>（如 ¥ 符号上标）用vw，它会随视口剧烈跳动
为什么加了 flex 布局后价格总对不齐？
因为 flex 默认按内容基线对齐，而中文和数字的字体度量不同——“¥199”里的 “¥” 和 “199” 基线不一致，加上不同字体（如 system-ui vs monospace）混用，错位更明显。
这不是 bug，是字体渲染机制决定的。强行用 align-items: flex-end 又会让文字底部贴底，失去呼吸感。
实操建议：
- 统一价格区域字体：
.price-tag .price { font-family: "SF Mono", "Segoe UI Mono", monospace; } - 用
line-height而非padding控制垂直居中，比如line-height: 1.4;配合height: 2.8em; - 如果必须用
flex，加align-items: center;+justify-content: center;，再给子元素设vertical-align: middle; - 检查是否意外继承了父级的
font-size或letter-spacing，它们会悄悄破坏对齐
真正麻烦的从来不是怎么让它“看起来对齐”，而是怎么让它在 iOS 微信、安卓 WebView、旧版 Edge 里都保持一致——多测真机，少信模拟器。
