设计 / 响应式
适用于流式排版和间距的CSS Clamp()生成器
输入最小和最大尺寸，以及各自适用的视口宽度，即可获得以rem为单位、在两者之间平滑缩放的clamp()表达式，并查看常见屏幕宽度下的尺寸表。
适用于流式排版和间距的CSS Clamp()生成器: 该工具会在两个点之间绘制一条直线：从320 px视口下的16 px到1280 px视口下的24 px，尺寸每增加100 px宽度就增长0.8333 px。该直线会写成固定的rem部分加上vw部分，即0.8333rem + 0.8333vw；在范围之外，clamp()会将其限制在1rem到1.5rem之间。 完全在浏览器中本地运行，文件不会上传到服务器。
- 类别
- 开发者工具
- 使用次数
- 在浏览器中
- 费用
- 免费·无需注册
- 可用性
- 可直接使用
完全在浏览器中运行
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| 视口宽度 | 大小 |
|---|---|
| 320 px | 16 px |
| 375 px | 16.46 px |
| 768 px | 19.73 px |
| 800 px | 20 px |
| 1024 px | 21.87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
clamp()的中间值是穿过你提供的两个点的直线：它将固定的rem值加到视口宽度的一定比例上，使大小在两个宽度之间平滑缩放，并在超出这两个宽度时停止于边界值。固定部分使用rem，可以让大小响应读者自己的字体大小设置。它适用于任何长度，包括字体大小、内边距、间距和外边距。
示例演算
假设标题在375 px手机上为32 px，在1440 px桌面设备上为48 px，则斜率为16 ÷ 1065 = 1.5023 px per 100 px，表达式为clamp(2rem, 1.6479rem + 1.5023vw, 3rem)。在800 px平板上，标题为38.38 px。
无障碍访问
WCAG要求文本可以放大到200%。由于流式尺寸的一部分取决于视口，过于陡峭的斜率可能导致放大后文本无法明显变大；最大尺寸应控制在最小尺寸的大约2.5倍以内，并使用字号比例生成器选择一致的步骤。
使用方法
- 输入最小和最大尺寸，单位为px。
- 输入它们应适用的视口宽度。
- 复制clamp()值，并在表格中查看各尺寸。
隐私与限制
在你的浏览器中计算。
相关工具
常见问题
为什么不直接使用vw？
单独使用vw会忽略读者的字体大小设置，在手机上可能变得很小，在宽屏上也可能变得很大。clamp()中的rem部分和限制条件可以解决这两个问题。
clamp()是否到处都能使用？
可以：所有当前浏览器自2020年起都已支持clamp()。
在更宽的屏幕上，尺寸可以变小吗？
可以：输入更大的最小宽度尺寸，表达式就会改为减去vw部分。
免费工具·使用在浏览器中次·无需账户