等宽字体是倒计时数字布局的硬性前提，因非等宽字体下“1”与“0”宽度差异导致每秒更新时抖动；须显式声明ui-monospace、'SF Mono'等回退字体，并配合grid分列、分隔符独立定位、padStart补零及节制clamp缩放。
为什么等宽字体（monospace）是倒计时数字布局的硬性前提
非等宽字体（比如 system-ui 或 Helvetica）下，数字 "1" 和 "0" 宽度差异大，导致每秒更新时整行“抖动”或错位——这不是动画问题，是排版基线被反复重算的结果。只有 font-family: 'Courier New', monospace 或 ui-monospace 能保证每位数字严格对齐、宽度恒定。
注意：不要只写 monospace。iOS Safari 对纯关键字支持不稳定，必须显式列出回退字体，例如：font-family: ui-monospace, 'SF Mono', 'Courier New', monospace。
grid + clamp() 控制整体缩放，但别让 clamp() 直接套在 font-size 上
直接写 font-size: clamp(2rem, 8vw, 12rem) 在小屏上容易撑爆容器，尤其当数字位数变化（如从 09 变 10）时，vw 基准会随视口实时跳变，造成视觉撕裂。
更稳的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
grid固定列数（如grid-template-columns: repeat(4, 1fr)分隔「时」「分」「秒」「毫秒」四组） - 每组内部用
display: flex+justify-content: center居中单个.digit -
font-size改用clamp(1.5rem, 5vw, 6rem)，上限压到6rem（而非12rem），避免手机横屏时过大 - 给
.digit加min-width: 1.2em防止极端缩小时字符挤压
冒号 : 的定位必须脱离文本流，否则会被等宽字体拉扯变形
如果把 : 写在同一个 .digit 元素里，它会继承等宽字体的字宽，和数字一起被拉伸或压缩，视觉上粗细不一、位置漂移。
正确做法是独立成元素，并用绝对定位或 grid-column 精确卡位：
- HTML 中单独写
<span class="separator">:</span> - CSS 中设
.separator { grid-column: 3; align-self: center; }（假设第3列是分隔位） - 禁用其字体继承：
font-family: system-ui;，避免被父级monospace影响 - 加
line-height: 1和vertical-align: middle消除基线偏移
补零（padStart(2, '0')）不是可选项，而是防跳变的必要步骤
JavaScript 更新时间时，若直接输出 Math.floor(seconds % 60)，从 9 到 10 会少一位字符，触发浏览器重排——哪怕用了等宽字体，宽度突变仍会导致左右数字“抽搐”。
必须统一补零：
- 小时、分钟、秒全部转成两位字符串：
String(hours).padStart(2, '0') - 每个
.digit元素只放一位数字（即拆成<span class="digit">0</span><span class="digit">9</span>），而非整个两位数塞进一个元素 - 配合 CSS
text-align: center和固定width，确保每位始终占据相同空间
真正难的不是写出来，是让所有设备上数字都不晃、不跳、不糊——等宽字体只是起点，补零、分列、分隔、缩放节制，缺一不可。
