CSS clamp 流体字号生成器
根据两组字号和视口宽度生成 rem/vw CSS clamp 表达式,支持设置根字号。
使用方法
输入最小、最大像素字号及对应视口宽度。首选值在两点之间线性变化,并由 rem 表示的上下限约束。
根字号为 16px 时,320px 视口用 16px、1280px 视口用 32px,可得到 clamp(1rem, 0.666667rem + 1.666667vw, 2rem)。将结果作为 font-size 等 CSS 属性的值。
行为与限制
根字号只是 px 转 rem 时的计算假设,本工具不会更改样式表。应用后应测试浏览器缩放和长文本,不要禁用用户字号缩放。
参考资料
常见问题
最小字号能等于最大字号吗?
可以,这会得到固定字号。最大视口仍必须大于最小视口。
输入会被上传吗?
不会。计算在浏览器中完成,本工具不会将输入提交到 API 或保存到本地存储。文本类工具最多接受 200,000 个字符。