CSS Clamp() 计算器
根据两个视口宽度的最小和最大尺寸计算真实的流体 CSS lamp() 值，并逐步显示斜率和交叉点以及实时调整大小预览。
处理中...
0%
结果
CSS Clamp(MIN, PREFERRED, MAX) 让一个声明取代一整堆媒体查询：值保持在最小视口下方的 MIN 处，在最大视口上方的 MAX 处，并在两者之间平滑缩放。困难的部分是首选术语 - 与视口相关的表达式，例如 0.833rem + 0.833vw - 没有人愿意手动导出。该计算器根据四个数字实际计算它：最小尺寸、最大尺寸以及每个数字适用的视口宽度。
显示每个中间数字，而不仅仅是最后一条线：斜率（视口的每个像素值增长多少个大小单位），表示为 vw 系数的相同斜率，以及 y 轴交点 - 添加到 vw 项的常量，以便线准确地穿过您指定的两个点。任何从教程中粘贴了clamp()值而不理解它的人都可以在这里看到并检查实际的算术。
视口宽度滑块驱动实时预览框，因此流体缩放是可见的，而不仅仅是计算出来的：将其拖动到最小和最大断点之间，并观察示例文本的大小与调整实际浏览器窗口大小时的大小完全相同。每次击键时输出行和细分都会更新 - 当基本字体大小本身也需要转换时，这可以自然地与 px 到 rem 转换器配对。
一步切换到完整流体排版系统的字体比例模式：输入基本尺寸和模块化比例（1.125 到 1.5），并获得六种尺寸 - 小、基本、h4、h3、h2 和 h1 - 每个尺寸都计算为自己的在更柔和的移动进程和完整桌面比例之间的钳位（）线，准备复制为 CSS 自定义属性块。