分类: 开发工具
CSS clamp 生成器
不写媒体查询的流体字号
给出最小、最大字号以及它们对应的视口宽度，得到在两者之间平滑变化的 clamp() 声明，并附上常见宽度下的实际渲染字号表。
输出
font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
| 视口宽度 | 实际渲染字号 |
|---|---|
| 360px | 18px |
| 768px | 24.21px |
| 1024px | 28.1px |
| 1280px | 32px |
| 1600px | 32px |
预览
流体字号在手机上仍然好读，在桌面上也保持比例。
声明在页面内生成，不会上传任何内容。
本页的所有处理都在浏览器中完成，不会上传任何内容。
这个工具能做什么
clamp() 取代了过去那一摞把标题分成四档的媒体查询。麻烦的是中间那一项：它必须是经过你两个点的直线，也就是斜率乘视口宽度再加截距，写成一个 vw 值加一个 rem 值。这里替你算好。上下界都保留 rem，这样把浏览器默认字号调大的访客仍然能拿到更大的字；表格则列出 360、768、1024、1280、1600 像素时浏览器真正渲染出的字号，让你看得见变化而不是凭感觉。同一个值也能用在内边距、间距和外边距上，不限于文字。
使用方法
- 填写最小字号，以及它生效的视口宽度。
- 填写最大字号，以及不再继续变大的视口宽度。
- 复制 clamp() 声明，并核对预览表。
隐私说明
本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。
常见问题
- 为什么上下界用 rem 而不是 px？
- 只用视口单位表示的字号会忽略浏览器的文字大小设置，这是无障碍缺陷。以 rem 作界限会跟随访客自己的默认字号缩放。
- 可以用在间距上吗？
- 可以。这个值就是一个长度，padding、margin、gap、width 等接受长度的属性都能用。
- 会向服务器发送内容吗？
- 不会。声明是在页面里根据你输入的数字算出来的，所以才能即时更新。