语义正确优先选 ，因和明确表达商品名与价格的一对一定义关系，比更利于无障碍访问和seo，而用于二维数据，不适用。
价格牌用 <div> 还是 <code><dl></dl> 更合适？
直接说结论：语义正确优先选 <dl></dl>（定义列表），尤其当价格对应明确商品名时。浏览器和读屏器能识别 <dt></dt>（术语）和 <dd></dd>（定义）的逻辑关系，比一堆 <div> 更可靠。
<p>常见错误是用 <code><table> 做价格牌——它本意是展示二维数据，而单个商品+价格是一对一关系，不是表格结构。用 <code><table> 会导致语义混乱、缩放时错位、无障碍支持差。
<p>实操建议：</p>
<ul><li>单个价格牌（如门店橱窗）：用 <code><div class="price-tag"> 完全没问题，简洁可控
<li>多个并列价格项（如菜单、价目表）：用 <code><dl></dl>，每个 <dt></dt> 放商品名，<dd></dd> 放价格
<dt></dt> 里再套 <div> 或 <code><p></p>，保持扁平
响应式断点怎么设才不卡顿？
价格牌最常出问题的地方不是“怎么变小”，而是“什么时候变”——断点设在 768px 或 992px 这类通用值，往往和实际内容撑开宽度不匹配，导致文字突然换行、价格符号错位。
更稳妥的做法是基于内容本身设断点，比如用 min-width: 30em（约 480px）起效，因为 em 相对于当前字体大小，比像素更适应缩放和不同设备默认字号。
实操建议：
- 先写移动端样式（无媒体查询），让价格牌在小屏上竖排、字号适中、留白足够
- 用
@media (min-width: 30em)开始加横向布局，比如<dt></dt>和<dd></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 的渲染有延迟。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
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></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 里都保持一致——多测真机，少信模拟器。
