流式尺寸 clamp 计算
Fluid Size Calculator
算出一条 clamp() 表达式，让尺寸在两个视口宽度之间平滑变化。
构建一个在两个视口宽度之间平滑缩放尺寸的 `clamp()`——流式排版表达式，算术已替你做好。两端都用 `rem`，这是决定结果是否无障碍的部分。
基准点
得到的表达式
斜率
0.833vw
截距
0.833rem
范围
1.000–1.500rem
rem，这不是风格偏好。用 px 写的 clamp 会完全无视读者在浏览器里定下的字号。这是一处 WCAG 1.4.4 失败，而把默认字号调到 24px 的人不是写代码的人，所以写的人一辈子也遇不上。 vw 的系数仍然是相对视口的比例，所以在上面改根字号时，只有两端会动，斜率不变。实际算出来的值
| 视口 | 尺寸 | |
|---|---|---|
| 320px | 16px | |
| 375px | 16.46px | |
| 480px | 17.33px | |
| 640px | 18.67px | |
| 768px | 19.73px | |
| 1024px | 21.87px | |
| 1280px | 24px | |
| 1440px | 24px（已钉住） | |
| 1920px | 24px（已钉住） |
值得知道的
- · 过了上面那个基准点，尺寸就被钉住了，再把窗口拉宽也不会变。两个基准点都是 rem，所以它仍然跟着读者自己的字号走——同样的式子写成 px 就不会。
要成套地做这些值的话， 字号阶梯生成会给出 clamp 两端要用的每一级尺寸。
怎么用
设定四个锚点
最小视口下的尺寸、最大视口下的尺寸，以及这两个尺寸各自适用的视口宽度。其他一切都由此推出。
检查解析表
它显示这个表达式在一系列真实视口宽度下求值的结果，并标出是钳位而不是斜率在起作用的那些。
复制声明
一条 `font-size: clamp(...)`。斜率和截距也会显示，供你想理解它而不只是粘贴它的时候用。
常见问题
为什么单位是 `rem` 而不是 `px`？
因为 `px` 的 clamp 完全无视读者的浏览器字号。一个因为需要而把默认字号设成 24px 的人，照样得到你的 16px——那是一次 WCAG 1.4.4 失败，而且是作者永远体验不到的失败。
视口的两端应该是我的断点吗？
不一定。clamp 处理两端之间的一切，所以有用的两端是你支持的最窄的手机，以及你不想让文字继续变大的那个宽度——通常在 1200–1400px 附近，而不是你最大的断点。
缩放还管用吗？
页面缩放管用——它改变视口宽度，clamp 会跟随。纯文字缩放是 `rem` 锚点保护的对象：`vw` 部分不响应它，所以没有 `rem` 分量的话文字就会被冻住。这就是表达式把两者混合的原因。
也能用于内边距和间距吗？
能——表达式是单位算术，不在乎落在哪个属性上。输出写着 `font-size` 只是因为那是常见情况；换掉属性，保留值。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS，不重排任何声明，原本的记号序列一个不动。
CSS 网格布局生成
CSS Grid Builder
用命名区域可视化地排出网格，并导出 grid-template 的 CSS。
字号阶梯生成
Type Scale Generator
由基准字号和比例生成模块化的字号和间距阶梯，导出成 CSS 或设计变量。
颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。