CSS clamp() 计算器（流体排版）
流体排版用 `clamp(min, preferred, max)` 在两个视口宽度间线性缩放——无需断点。本计算器用最小/最大值与视口范围生成精确的 `clamp(min, intercept + slope*100vw, max)`，无舍入噪声。输出 `rem`（根字号可配）或 `px`。实时预览块可观察缩放。
—
预设
结果
font-size: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);调整窗口大小可看预览线性缩放。
预览
敏捷的棕色狐狸跳过懒狗。
使用方法
- 选预设（Body、H1 等），或自行填 min/max 与视口范围。
- 选择 rem 或 px（推荐 rem——尊重用户偏好）。
- 把一行 clamp 表达式复制进 CSS。
常见问题
- 为何用 clamp() 而非媒体查询？
- 两个断点间线性缩放——无跳变、无需为每个断点维护值。同等效果，更少代码。
- 为何用 rem 而非 px？
- 用户可在浏览器中调整基础字号（无障碍等）。rem 尊重它，px 忽略。
- 中间的 slope 是？
- 视口每增加 `1vw` 值增长的量。与 intercept 一起构成经过 (minVw, minVal) 与 (maxVw, maxVal) 的线性函数。
- 浏览器支持？
- `clamp()` 自 2020 年起在所有浏览器可用——Safari 13.1、Chrome 79、Firefox 75。2026 年全平台安全。
相关工具
CSS 单位转换器
使用你自定义的基础字号与视口，在 px、rem、em、pt、vw、vh、% 之间互转。
转换 0 0
CSS Grid 演练场
可视化选择 grid-template-columns / rows、gap 与项目对齐——CSS 直接复制到项目。
开发 0 0
CSS 渐变生成器
用多色停靠点设计线性或径向 CSS 渐变并复制代码。
颜色 0 0
颜色格式转换器
在 HEX、RGB、HSL、HSV、OKLCH 与 CSS 变量之间互转任何颜色。
颜色 0 0
CSS Box Shadow 生成器
可视化设计 CSS box-shadow——多图层、实时预览、CSS / Tailwind 代码一键复制。
颜色 0 0
CSS 滤镜演练场
可视化组合 blur、brightness、contrast、hue、sepia、invert 等 9 项——复制 CSS 滤镜或 Tailwind 任意值。
颜色 0 0