units-colors

单位与颜色

长度/角度/时间单位与颜色表示法选型与实践。

要点

• 长度：px、百分比、视口（vw/vh）、字体相关（em/rem）；
• 颜色：hex/rgb/hsl 与 oklch/oklab 新色彩空间；
• 透明度：rgba/hsla 与 opacity 差异；
• 时间与动画：s/ms、缓动函数。

响应式尺寸

/* 字号在 16px~24px 之间，按视口宽度渐变 */
.title { font-size: clamp(16px, 2vw + 1rem, 24px); }

色彩对比

• 文本与背景对比度至少 4.5:1（小文本）；
• 采用 oklch() 提升感知均匀性：color: oklch(60% 0.15 20)（有兼容性需回退）。