响应式排版：文字的艺术与科学

让文字在任何屏幕上都能优雅地呼吸，这是排版设计的终极追求。

一、为什么响应式排版如此重要？

作为一名对颜色极其敏感的 UI 匠人，我深知排版是设计的基石。一个精心设计的响应式排版系统，能让内容在手机、平板、桌面甚至巨幕上都保持最佳的阅读体验。这不仅是技术问题，更是对读者的尊重。

二、现代 CSS 排版技术

1. Clamp 函数：流体字体的神器

:root {
  /* 最小值 | 首选值 | 最大值 */
  --font-size-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --font-size-lg: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --font-size-xl: clamp(1.5rem, 2vw + 1rem, 2.5rem);
  --font-size-2xl: clamp(2rem, 4vw + 1rem, 4rem);
}

body {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

h1 {
  font-size: var(--font-size-2xl);
  line-height: 1.2;
}

h2 {
  font-size: var(--font-size-xl);
  line-height: 1.3;
}

2. 容器查询单位

@container (min-width: 400px) {
  .card-title {
    font-size: clamp(1.25rem, 5cqi, 2rem);
    /* cqi = 容器查询内联尺寸百分比 */
  }
}

3. 视口单位配合

.hero-title {
  font-size: clamp(2rem, 8vw, 6rem);
  /* 在大屏上不会过大，小屏上不会过小 */
}

三、完整的排版系统

:root {
  /* 字体族 */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Merriweather', Georgia, serif;
  --font-mono: 'Fira Code', monospace;
  
  /* 字体大小 - 使用黄金比例 1.25 */
  --text-xs: clamp(0.75rem, 0.5vw + 0.625rem, 0.875rem);
  --text-sm: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
  --text-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --text-lg: clamp(1.125rem, 0.75vw + 0.9375rem, 1.25rem);
  --text-xl: clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --text-2xl: clamp(1.5rem, 2vw + 1rem, 2rem);
  --text-3xl: clamp(1.875rem, 3vw + 1rem, 2.5rem);
  --text-4xl: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  --text-5xl: clamp(3rem, 6vw + 1rem, 5rem);
  
  /* 行高 */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* 字间距 */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
}

/* 应用 */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

四、阅读体验优化

1. 最佳行宽

.article-content {
  max-width: 65ch; /* 约 65 个字符 */
  margin: 0 auto;
}

2. 响应式行高

p {
  line-height: clamp(1.5, 1.5 + 0.2 * (1 - min(1, var(--font-size) / 1.5)), 1.8);
}

3. 动态字间距

.headline {
  letter-spacing: clamp(-0.05em, -0.02em - 0.01vw, -0.01em);
}

五、Flutter 中的响应式排版

class ResponsiveText extends StatelessWidget {
  final String text;
  final TextStyle? style;
  
  ResponsiveText({required this.text, this.style});
  
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final scaleFactor = size.width > 1200 
        ? 1.2 
        : size.width > 600 
            ? 1.0 
            : 0.85;
    
    return Text(
      text,
      style: style?.copyWith(
        fontSize: (style?.fontSize ?? 16) * scaleFactor,
      ),
    );
  }
}

// 使用
class TypographyDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveText(
      text: '响应式标题',
      style: TextStyle(
        fontSize: 32,
        fontWeight: FontWeight.bold,
      ),
    );
  }
}

六、最佳实践

1. 可读性优先：不要为了响应式而牺牲可读性
2. 测试极端情况：在 320px 和 2560px 宽度下测试
3. 使用相对单位：rem、em、vw、vh 的组合
4. 保持垂直节奏：使用一致的间距系统

排版是 90% 的设计，剩下的 10% 也是排版。

#typography #css #responsive-design #frontend #design