# CSS 流体排版 Clamp 计算器

输入最小/最大视口与字号边界，输出 clamp() 表达式、可复制 CSS 与实时预览数据

> 标准页面: https://elysiatools.com/zh/tools/css-fluid-typography-clamp-calc

- **分类:** Design

- **关键词:** CSS, clamp, 流体排版, 响应式字体

## 概述

根据视口与字号边界计算 fluid typography 的斜率和截距，输出可复制的 clamp() 与预览 HTML。

## 输入项

- **最小视口** (number)
- **最大视口** (number)
- **最小字号** (number)
- **最大字号** (number)
- **根字号** (number)
- **示例文本** (text)

## 适用场景

- 需要在移动端到桌面端之间实现字体大小平滑过渡，避免编写繁琐的媒体查询时。
- 构建响应式设计系统，需要根据视口宽度动态调整标题或正文字号时。
- 需要快速计算 CSS clamp() 函数中的首选值（包含 vw 和 rem/px 的混合表达式）时。

## 工作原理

- 输入目标设计的最小视口宽度与最大视口宽度（单位为像素）。
- 设定对应的最小字号与最大字号，并指定当前项目的根字号（默认为 16px）。
- 系统根据线性插值公式自动计算出视口变化时的斜率与截距，并输出以 rem 和 vw 为单位的 clamp() 表达式。

## 使用案例

- 移动端优先的响应式网页设计，使大标题在手机和 4K 屏幕上都能完美呈现。
- 规范化前端 UI 组件库中的排版系统，减少 CSS 代码中的媒体查询数量。
- 快速重构旧项目中的固定字号，将其升级为现代的流体响应式布局。

## 常见问题

### 什么是 CSS clamp() 函数？

clamp() 函数接收三个参数：最小值、首选值和最大值。它允许属性值在设定的范围内随着视口大小动态变化，超出范围时则锁定在最值。

### 为什么要使用 rem 和 vw 混合作为首选值？

混合使用 rem 和 vw 可以确保在视口缩放时字体平滑过渡，同时保留用户在浏览器中手动调整默认字号的可访问性。

### 根字号（Root Font Size）有什么作用？

根字号用于将输入的像素值（px）转换为相对单位（rem），通常浏览器的默认根字号为 16px。

### 这个计算器支持计算除字体大小以外的属性吗？

支持。虽然主要用于流体排版，但生成的 clamp() 表达式同样适用于 padding、margin 等任何支持长度单位的 CSS 属性。

### 如果视口超出最大或最小范围，字号会怎样变化？

当视口小于最小视口时，字号将固定为设定的最小值；当视口大于最大视口时，字号将固定为设定的最大值。

## 相关工具

- [可变字体轴实例与 CSS font-variation-settings 构建器](https://elysiatools.com/zh/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): 上传可变字体（TTF/OTF/WOFF/WOFF2），检视 fvar 轴与命名实例，浏览器内实时预览插值效果，并生成可直接复制的 font-variation-settings CSS、高级属性等价写法与可变 @font-face 声明。
- [跟读提示生成器](https://elysiatools.com/zh/tools/audio-read-along-cue-generator): 从旁白音频及其脚本生成句子或单词级时间戳提示,用于卡拉OK式跟读和语言学习。
- [llms.txt / AI 爬虫审计生成器](https://elysiatools.com/zh/tools/llms-txt-and-ai-crawler-audit): 从实站爬取或粘贴的页面清单生成 llms.txt（llmstxt.org v2 格式：H1、引用块摘要、H2 文件列表），并按 RFC 9309 匹配算法审计 robots.txt 对 GPTBot、ClaudeBot、PerplexityBot、Bytespider 的策略——附 allow/block 预览与可直接粘贴的指令。
- [CSV 生成 JSON-LD](https://elysiatools.com/zh/tools/json-ld-generator-from-csv): 把 CSV 或 Excel 行数据转换为适用于 Article、Product、Event 的 Schema.org JSON-LD，方便 SEO 团队直接验证
- [批量条码生成器](https://elysiatools.com/zh/tools/barcode-batch-generator): 从 CSV 或多行文本批量生成 Code 128、EAN-13、UPC-A、ITF-14、QR Code 和 Data Matrix，并导出 PNG ZIP 或 PDF
- [ECharts 主题 Token 抽取器](https://elysiatools.com/zh/tools/echarts-theme-token-extractor): 从 ECharts 主题 JSON 抽取设计 token——颜色、数字、字号与字符串——并直接导出到你的设计系统。粘贴一个主题对象（即通过 echarts.init(dom, themeName) 注册的那种），工具遍历每个叶子节点，为每个颜色（可选地将命名色/rgb 规范化为 hex）、间距数字、字号与字符串打标，然后输出干净的 CSS 变量、Tailwind theme.extend 配置、Style Dictionary tokens.json 或 SCSS 变量。在 ECharts 可视化主题与 Figma/CSS/Tailwind 设计 token 之间架桥，无需逐个手抄。
- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
- [艺术二维码：样式化模块与 Logo 嵌入生成器](https://elysiatools.com/zh/tools/qr-code-art-styled-module-and-logo-embed-generator): 生成品牌色、渐变、圆角/圆点模块与中央 Logo 的艺术二维码，附 ISO 掩码惩罚分解、逐模块元数据导出与里德–所罗门擦除预算判定。

## 示例

- [Bulma CSS 框架示例](https://elysiatools.com/zh/samples/bulma): Bulma CSS框架示例，包括列、组件、表单控件、布局系统和现代化基于CSS的设计模式
- [Milligram CSS 框架示例](https://elysiatools.com/zh/samples/milligram): Milligram CSS框架示例，包括排版、表单、网格和组件
- [CSS选择器示例](https://elysiatools.com/zh/samples/css-selectors): 用于提取和分析测试的CSS选择器示例集合
- [Tailwind CSS 示例](https://elysiatools.com/zh/samples/tailwind-css): Tailwind CSS示例 - 实用优先的CSS框架，具有响应式设计、组件和自定义配置

## 相关内容

- [CSS 编写、布局与层叠工作流](https://elysiatools.com/zh/hubs/css-authoring-layout-and-cascade-workflows): 通过可读格式化、选择器诊断、响应式片段和视觉状态检查来编写与审查 CSS。