↔️ 一个工具箱,
完成所有设计任务

Clamp 流式字体计算器

用 CSS clamp() 生成流式排版。设置最小、首选和最大尺寸——获得完美的 clamp() 公式和可视化缩放预览。

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

↔️ Clamp 流式字体计算器

Clamp 流式字体指南

clamp() 是把值限制在最小值和最大值之间的 CSS 数学函数:clamp(MIN, VAL, MAX)。VAL 在 MIN 与 MAX 之间时返回 VAL;低于 MIN 时返回 MIN,高于 MAX 时返回 MAX。这让流式排版无需媒体查询即可实现。

设置最小和最大字号,以及发生缩放的视口范围。工具计算完美的 vw 公式,展示 6 个视口宽度下的字号预览,以及字号在整个范围内变化的曲线。

专业提示

常见问题

Q: CSS 的 clamp() 做什么?
CSS 的 clamp() 做什么?clamp(MIN, VAL, MAX) 在 MIN 和 MAX 之间取值。VAL 小于 MIN 返回 MIN,大于 MAX 返回 MAX,否则返回 VAL。适合永远不会太小或太大的流式尺寸。
Q: clamp() 和 min()、max() 有什么区别?
clamp() 和 min()、max() 有什么区别?min() 取最小值,max() 取最大值,clamp() 结合两者:把中间值钳制在上下限之间。clamp() 是流式排版的主力。
Q: clamp() 所有浏览器都支持吗?
clamp() 所有浏览器都支持吗?支持。clamp()、min()、max() 从 2020 年起所有现代浏览器都支持(Chrome 79+、Firefox 75+、Safari 13.1+)。
Q: 流式排版用什么视口尺寸?
流式排版用什么视口尺寸?常见范围是通用站点 320px-1200px,移动优先项目 360px-768px。超过 vmax 后字号固定在最大值——这是有意为之。
Q: clamp() 能用于间距吗?
clamp() 能用于间距吗?能。流式内边距和间隙用同样的公式:clamp(16px, 4vw, 48px)。流式间距无需额外媒体查询即可保持设备间节奏。

中国传统色

中国传统色源自「五色观」——青、赤、黄、白、黑,对应五行、方位与季节。古人从矿物与植物中提炼颜料,形成了数百种富有诗意的色名。这些色彩被广泛用于宫廷服饰、建筑彩绘与书画创作,至今仍是设计师的灵感源泉。

胭脂 #9D2933

古代妆饰与衣料的经典红色,由胭脂虫或红花制成

朱砂 #FF461F

矿物颜料,故宫红墙与印章的常用色

黛蓝 #425066

古代女子画眉之色,沉稳内敛

竹青 #789262

竹叶之色,文人雅士钟爱的清雅色调

月白 #D6ECF0

月光般的淡蓝色,明清宫廷常服用色

藤黄 #FFB61E

取自藤本植物汁液,国画重要黄色颜料

藕荷 #E4C6D0

藕色与荷色的结合,温婉柔美

秋香 #D9B611

秋日桂花的黄绿色,明代流行色

石绿 #16A951

矿物孔雀石研磨而成,山水画中的绿色

墨色 #50616D

书法用墨的深灰蓝色,文房四宝之色

Q: 什么是中国传统色?
什么是中国传统色?中国传统色源自「五色观」——青、赤、黄、白、黑对应五行与方位。古人从朱砂、藤黄、石绿等矿物植物中提取颜料,形成了数百种如「月白」「黛蓝」般富有诗意的色名。
Q: 中国红是什么色值?
中国红是什么色值?中国红属于朱砂色系,常用色值 #FF461F(朱红)或 #9D2933(胭脂)。故宫红墙更接近深红色 #A61B29。