什么是流体排版？

流体排版使文本在屏幕尺寸间平滑缩放，而不是在固定断点间跳跃。使用 CSS clamp() 函数，字体大小和行高会随着视口宽度的变化按比例调整 — 无需媒体查询。

传统方法

固定断点

在断点处大小突然变化
需要多个媒体查询
每个元素需要维护多个值
断点间缩放不一致

流体排版

clamp() 解决方案

平滑、连续的缩放
无需媒体查询
每个元素仅需一个声明
任何视口下都能完美调整大小

理解 clamp()

clamp(min, preferred, max) 函数接受三个值：最小大小、基于视口宽度的首选大小和最大大小。浏览器会自动计算任何视口的正确大小。

示例：font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem) 在 320px 视口处平滑缩放文本从 16px 到 1440px 视口处的 24px。

为什么使用此计算器？

计算首选值（中间参数）需要复杂的数学运算：将像素值转换为 rem、计算线性函数的斜率和 y 截距。此计算器处理所有计算，并立即为您提供生产就绪的 CSS 代码。

自动计算

复杂的数学公式即时计算，结果准确。

实时预览

查看排版在不同视口尺寸下的精确缩放效果。

即用型代码

直接将生产就绪的 CSS 代码复制到项目中。

使用方法

按照以下简单步骤为项目生成流体排版 CSS。计算器通过实时预览和即时代码生成指导您完成每个参数。

设置视口范围

输入设计的最小和最大视口宽度。常见值为 320px（最小手机）和 1440px（标准桌面）。文本将在这些断点之间线性缩放。

推荐范围：320px–1440px 覆盖从手机到桌面的 95% 设备。

设置字体大小

使用滑块或直接输入最小和最大字体大小。最小值是最小视口处的大小，最大值是最大视口处的大小。

您也可以点击预设（H1–H6、正文、小号）来加载基于最佳实践的常见排版值。

调整行高

设置最小和最大行高值。较大的文本通常需要更紧的行高（例如标题为 1.1–1.2），而正文需要更多间距（例如 1.5–1.7）。

提示：如果两个值相同，输出将是静态行高而不是 clamp()，代码更简洁。

选择输出单位

选择 rem（推荐）或 px 作为输出。使用 rem 时，设置基础字体大小以匹配项目的根字体大小（通常为 16px）。

rem：尊重用户浏览器设置（更好的可访问性）
px：独立于根字体大小的固定大小

预览和复制

拖动视口滑块预览文本在不同屏幕尺寸下的缩放效果。满意后，点击复制将 CSS 代码复制到剪贴板。

功能

此计算器提供全面的工具，用于精确轻松地创建流体排版。每项功能都旨在简化工作流程并确保准确的结果。

CSS clamp() 生成

使用 clamp() 函数为字体大小和行高生成生产就绪的 CSS。

正确计算的斜率 (vw) 值
准确的截距 (rem 或 px) 值
简洁、优化的输出

排版预设

八个内置预设基于行业最佳实践覆盖常见排版需求。

H1 至 H6 标题
正文和小号文本
优化的大小和行高范围

交互式预览

视口滑块让您模拟从 320px 到 1920px 的任何屏幕宽度。

实时文本缩放预览
精确的视口尺寸模拟
即时视觉反馈

公式分解

公式部分显示分步计算，完全透明。

斜率计算详情
视口宽度系数
y 截距计算

灵活输出

在 rem 和 px 输出之间切换，可配置基础字体大小。

rem 或 px 单位选择
可自定义的基础字体大小
准确的转换

流体行高

使用 clamp() 生成流体行高值，在所有尺寸下保持最佳可读性。

与字体大小成比例缩放
值匹配时输出静态值
在所有视口间保持可读性

常见问题

什么是 CSS clamp()？

clamp(min, preferred, max) 是一个 CSS 函数，用于将值限制在最小值和最大值之间。首选值（通常使用 vw 单位）随视口缩放，但永远不会低于最小值或高于最大值。

clamp() 语法示例

/* font-size: clamp(minimum, preferred, maximum) */
font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem);

我应该使用 rem 还是 px？

在大多数情况下使用 rem。Rem 单位尊重用户的浏览器字体大小设置，提高可访问性。仅当您需要大小独立于根字体大小时才使用 px。

最佳实践：rem 单位提供更好的可访问性并尊重用户偏好，使排版更具包容性。

我应该使用什么视口范围？

320px 至 1440px 的范围适用于大多数项目。320px 覆盖最小的常见手机屏幕，1440px 是标准桌面宽度。根据项目的分析或设计规范进行调整。

320px：最小的手机设备（iPhone SE、较旧的 Android）
1440px：标准桌面/笔记本电脑屏幕
自定义范围：使用特定受众的分析数据

"基础字体"设置是什么？

这是您的根字体大小（在 <html> 元素上设置的值）。默认值为 16px。如果项目使用不同的根字体大小，请更改此值以确保 rem 转换准确。

设置根字体大小

html {
  font-size: 16px; /* Base font for rem calculations */
}

为什么我的行高输出显示静态值而不是 clamp()？

当最小和最大行高值相同时，无需缩放。计算器输出简单的静态值而不是不必要的 clamp()，以获得更简洁、更高效的 CSS。

示例：如果最小和最大行高都设置为 1.5，输出将是 line-height: 1.5; 而不是 line-height: clamp(1.5, 1.5, 1.5);

clamp() 在所有浏览器中都支持吗？

CSS clamp() 在所有现代浏览器中都支持，包括 Chrome 79+、Firefox 75+、Safari 13.1+ 和 Edge 79+。对于较旧的浏览器支持，考虑在 clamp() 声明之前提供备用字体大小。

浏览器	最低版本	发布日期	支持
Chrome	79+	2019 年 12 月	完全支持
Firefox	75+	2020 年 4 月	完全支持
Safari	13.1+	2020 年 3 月	完全支持
Edge	79+	2020 年 1 月	完全支持

备用示例

h1 {
  font-size: 2rem; /* Fallback for older browsers */
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem); /* Modern browsers */
}

我可以将其用于间距和其他属性吗？

clamp() 背后的数学原理适用于任何接受长度值的 CSS 属性 — padding、margin、gap、width 等。使用生成的公式作为参考，并在 CSS 中调整属性名称。

间距属性

padding
margin
gap
border-radius

尺寸属性

width / max-width
height / max-height
column-gap / row-gap
border-width

流体间距示例

.container {
  /* Fluid padding */
  padding: clamp(1rem, 0.5rem + 2vw, 3rem);
  
  /* Fluid gap */
  gap: clamp(0.5rem, 0.25rem + 1vw, 2rem);
  
  /* Fluid max-width */
  max-width: clamp(320px, 90vw, 1200px);
}