Loading...
Loading...
为流体排版生成响应式 CSS clamp()。
流体排版让字号在两个屏幕宽度之间平滑增长,而不是在断点处跳变,CSS clamp() 就是表达它的方式。这个工具从最小和最大字号算出 clamp() 值,省去你手动列方程。
设定最小字号和它生效的视口宽度,再设最大字号和它的视口宽度。工具算出斜率和截距,把一切换算成 rem,输出一个 clamp(最小, 首选, 最大) 值,其中首选部分由 rem 基数加 vw 项混合而成。实时示例按你设置在选定视口下产生的字号渲染,滑块让你扫过视口,看字号缩放并在两端被钳住。一切都在浏览器里运行。
输入带视口的最小和最大字号,即得到值。
字号按你的根字号换算成 rem。
示例文字按任意视口下的计算字号渲染。
拖动视口滑块,看字号缩放并被钳住。
设置根字号,让 rem 计算与你的项目一致。
font-size: clamp(...) 声明一键复制。
把设计里最小和最大的断点当作视口,再填上你字号阶里对应的字号。
输入最小字号,以及它该生效的视口。
输入最大字号,以及它的视口。
拖动预览视口,检查两端的缩放。
把 clamp() CSS 复制进你的样式表。
让主视觉和分区标题在各屏幕尺寸下平滑缩放。
同样的算法也适用于流体外边距、内边距和间隙。
不用摆弄断点就能搭出一套流体阶梯。
看清 rem 基数和 vw 项如何合成一个值。
它在你的两个「字号-视口」点之间拟合一条直线,把斜率作为 vw 项、截距作为 rem 基数,再把结果钳在最小和最大字号(rem)之间。
无账号、无网络请求;数值在你的浏览器本地计算。
只是少量算术,所以输入或拖动时结果和预览即时更新。