可用HTML+CSS实现时间刻度标尺：固定时间粒度（如1天=60px），用grid布局确保等宽列，配合transform: translateX()整数滚动对齐，white-space: nowrap防文字换行，position: sticky固定轴头，并适配DPR导出清晰图。
怎么用 HTML + CSS 实现可读的时间刻度标尺
纯 HTML/CSS 能做甘特图时间刻度，但必须放弃“自动对齐日期”的幻想——它本质是固定像素网格 + 人工映射时间单位。浏览器不解析日期，只渲染盒子；所以 2024-05-01 不会自动变成第 120px，得你算好每小时/天占多少像素。
常见错误是直接套用 table 或 flex 拉满宽度，结果缩放或日期范围变化时，刻度文字重叠、错位、断行。关键在两点：固定时间粒度（如 1 天 = 60px）、用 transform: translateX() 做平滑滚动对齐，而不是靠百分比撑开容器。
- 若展示「周粒度」，建议设
1week = 420px（7 天 × 60px），避免小数导致累积偏移 - 刻度文字（如
May 1）必须用white-space: nowrap+overflow: hidden防止换行撕裂标尺 - 用
position: sticky固定顶部时间轴时，父容器需设overflow-x: auto，否则 sticky 失效
为什么 grid-template-columns 比 flex 更适合刻度布局
flex 容易因内容宽度波动导致列宽不均（比如 May 和 September 字符数差太多），而 grid 可强制每格等宽且与时间单位严格绑定。例如：
grid-template-columns: repeat(30, 60px); /* 30 天，每天 60px */
这样即使某天文字超长，也能靠 text-overflow: ellipsis 截断，不影响整体节奏。而 flex: 0 0 60px 在容器不足时仍可能压缩，破坏时间比例。
立即学习“前端免费学习笔记（深入）”；
- 动态生成列数？用 JS 算好天数后拼
cssText注入style标签，别用insertRule—— 兼容性差且难调试 - 需要双层刻度（如主刻度为周、子刻度为日）？嵌套两行
grid，子行用grid-column: span 7对齐主行，不要试图用 margin 对齐 - IE11 不支持
grid？改用display: table-cell+ 固定width，但放弃响应式缩放——这是硬伤，没取巧办法
滚动时时间刻度错位？90% 是因为没处理 scrollLeft 小数像素
鼠标滚轮或触摸板拖动常触发小数像素值（如 scrollLeft = 123.456），直接赋给 transform: translateX(-123.456px) 会导致字体模糊、刻度线虚化。解决方法是四舍五入到整数：
element.style.transform = `translateX(${-Math.round(scrollLeft)}px)`;更稳妥的做法是监听 scroll 后节流，并用 getBoundingClientRect().left 校验当前视口起始时间点，反推应显示哪段刻度——尤其当用户快速拖拽跨月时，避免出现空白或重复刻度。
- 别在
scroll里直接操作 DOM 文字内容（如重写textContent），卡顿明显；优先用visibility: hidden控制显隐，复用已有节点 - 移动端 touchmove 触发频率高，加
passive: true，否则 Chrome 会警告并降级滚动性能 - 用
IntersectionObserver做刻度懒加载？不推荐——时间轴是线性结构，observer 无法预判滚动方向，容易闪白
导出 PNG 时时间刻度变模糊？根源在设备像素比（DPR）
用 html2canvas 或 dom-to-image 导出时，若未适配 DPR，1px 刻度线在 Retina 屏上会被渲染成 0.5px，导出后发虚。必须手动放大 canvas 缓冲区：
const scale = window.devicePixelRatio || 1;<br>canvas.width = width * scale;<br>canvas.height = height * scale;<br>ctx.scale(scale, scale);
同时确保所有刻度线宽设为 1 / scale（如 DPR=2 时设 border-bottom: 0.5px solid #ccc），否则线条过粗。
- 时间文字用
font-smoothing: antialiased无用，关键在字体大小 ≥ 12px 且避免旋转 - 导出前临时移除
transform，用left/top重定位，否则 html2canvas 对 transform 支持不稳定 - 如果刻度含 SVG 图标（如小三角），务必设
vector-effect: non-scaling-stroke，不然导出后线条粗细失真
时间刻度不是“画出来就行”，而是时间语义和像素精度的持续对齐。哪怕只差 0.3px，在 30 天跨度下就是 9px 偏移——肉眼可见的错位。每次调整粒度、缩放、导出，都得重新校验这个映射关系。
