CSS clamp 生成器
输入小屏幕和大屏幕的宽度与尺寸，生成可平滑改变文本尺寸或间距的 CSS。预览 px 或 rem 输出，然后复制 CSS 和 Tailwind 代码，或将其保存为文本。
功能介绍
指定两组宽度和尺寸
分别为较窄和较宽视口指定尺寸。支持 6 种类型：字体大小、间距、内边距、外边距、宽度和高度。
生成 px 或 rem 代码
所有输入值均使用 px，并可选择输出 px 或 rem。可获取 CSS 声明和 Tailwind 任意属性代码。
立即检查生成的 CSS
将 CSS 应用到预览中的两个元素。检查当前画框宽度下文本和间距的显示效果。
使用方法
选择要更改的属性
选择要设置的 CSS 属性，例如控制文本尺寸的 font-size，或用于元素间距的 gap。
输入两组视口宽度和尺寸
输入两个视口宽度及其对应的 px 尺寸。较窄视口的尺寸不得大于较宽视口的尺寸。
检查输出单位并生成
在高级设置中选择 px 或 rem。选择 rem 时，请在点击“生成 CSS”前同时检查基准字体大小。
预览并获取代码
复制 CSS 并粘贴到使用位置。打开 Tailwind 代码以获取代码。也可以一次复制全部 2 项或保存为文本。
适用场景
平滑调整标题尺寸
需要为窄视口和宽视口分别设置文本尺寸，并让尺寸在两者之间连续变化，而非分段变化时。
根据视口调整间距
需要让卡片间距或内边距在你设定的最小值和最大值之间变化时。
指定流动尺寸并查看预览
clamp 中的 3 个值
clamp 是一种 CSS 函数，用于指定最小值、流动值和最大值。生成的公式使用线性表达式连接两个参考点，并将范围外的尺寸限制为端点尺寸。
以 px 输入；以 px 或 rem 输出
视口宽度和尺寸均以 px 输入。输出为 rem 时，尺寸和固定项会除以基准字体大小，而视口宽度的 vw 系数保持不变。
匹配代码使用位置的 rem 基准
默认情况下，代码将 1rem 视为 16px。如果使用位置的根元素字体大小不同，端点尺寸和尺寸变化方式也会不同。请在实际使用位置检查。
预览画框决定视口宽度
预览是独立的显示画框。它会根据画框内部的宽度而不是整个屏幕的宽度计算 vw。根据属性不同，同一段生成的 CSS 会应用于文本、两个元素之间的间距、内边距或元素尺寸。
还要检查代码的使用位置
预览文本和结构是固定的。请在代码的使用位置检查字体、长文本、换行和浏览器文本放大效果。Tailwind 代码使用任意属性格式；还要检查使用环境是否会识别并生成该代码。
常见问题
超出指定视口宽度范围时会怎样？
小于指定较小宽度的视口会使用最小尺寸，大于指定较大宽度的视口会使用最大尺寸。使用 rem 时，必须与生成代码时采用相同的基准字体大小。
rem 的基准字体大小是什么？
它指定计算 1rem 时使用的 px 数。默认值为 16px，你可以在高级设置中更改为 1–1000px。请匹配使用该代码的根元素字体大小。
可以指定相同尺寸或负值吗？
将最小值和最大值设为相同数值即可使用固定尺寸。仅 margin 允许负值。不支持随视口变宽而缩小的尺寸。
更改属性或数值后会立即生效吗？
更改后会清除生成的代码和预览。请点击“生成 CSS”以更新。更改输出单位或基准字体大小时也会如此。
可以更改预览文本吗？
示例文本和 Aa 123 都是固定内容。无法编辑文本。还请检查使用生成 CSS 的页面中的实际文本和显示宽度。
输入和结果
- 视口宽度
- 1–100000px。较窄视口的宽度必须小于较宽视口。也接受小数。
- 尺寸
- 0–10000px。只有 margin 可设为 −10000px。较窄视口的尺寸不得大于较宽视口的尺寸。
- 输出
- CSS 声明和 Tailwind 任意属性。将全部 2 项保存为 css-clamp-generator.txt。
- 精度
- 生成公式使用最多 13 位有效数字的系数。若宽度非常接近，导致舍入后的公式无法重现参考点（例如），则会出错。