CSS clamp() 响应式排版与可访问性实践

概览clamp() 能以最小值、首选值与最大值构建流式字体与间距。相较媒体查询，clamp 更精简且可组合，适用于在不同视口与密度下维持可读性与版式稳定。基础用法:root { --step--1: clamp(0.875rem, 0.7rem + 0.5vw, 1rem); --step-0: clamp(1rem, 0.9rem + 0.7vw, 1.25rem); --step-1: clamp(1.25rem, 1.1rem + 1vw, 1.5rem); } body { font-size: var(--step-0); line-height: 1.6; } h1 { font-size: var(--step-1); line-height: 1.25; letter-spacing: 0.01em; } p { max-width: 65ch; } 组件排版.card { padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); border-radius: clamp(8px, 6px + 0.6vw, 16px); } .card-title { font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem); } .card-desc { font-size: var(--step--1); } 可访问性要点保持单位行高，避免随字体缩放发生行距异常。限制段落宽度在 60–75ch，保证眼动回行舒适。针对高对比文本确保字重与字距在缩放时不失衡。与 `prefers-reduced-motion` 配合减少动画对阅读的干扰。与视口单位组合.hero-title { font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem); } .hero-sub { font-size: clamp(1rem, 0.9rem + 1.2vw, 1.5rem); } @media (prefers-reduced-motion: reduce) { .hero-title, .hero-sub { scroll-behavior: auto; } } 工程落地将 clamp 步进抽象为设计令牌，统一在样式层复用。为多语言场景校准字体度量，避免东亚文字的行高被挤压。与容器查询单位结合，在组件容器内实现自适应排版。验证与指标浏览器：Chrome 120+、Safari 17+、Firefox 120+可读性：首屏正文宽度 60–70ch；行高 1.5–1.7在缩放 125% 下排版无重排与溢出问题