流式排版 Type Scale - 在线 clamp() 流式排版 Type Scale 生成器

流式排版 Type Scale · 使用说明

输入视口区间与基准字号区间，按 1.125–1.618 七种比例一次生成 xs 到 4xl 整套 clamp() 流式字号，输出 CSS 变量 / Tailwind / SCSS 三种格式并带行高建议。视口滑块实时预览各级实际像素，公式面板展示斜率与截距怎么来的——理解原理而非抄黑箱。与单值的 clamp() 流式尺寸互补：那边调一个值，这边生成整套排版系统。

示例

360–1200px · base 16–18px · 比例 1.250

--text-base: clamp(1rem, 0.96rem + 0.21vw, 1.125rem) 全套 8 级

如何使用

1. 设定最小 / 最大视口与基准字号区间
2. 挑选缩放比例（正文项目常用 1.250 Major Third）
3. 拖动视口滑块检查各级在手机 / 桌面的实际大小
4. 复制 CSS 变量 / Tailwind / SCSS 三选一到项目

小贴士

• 根字号建议固定 16px，流式交给 clamp()，保住用户浏览器字号设置
• 标题级差用大比例（1.333+），正文相邻级差用小比例更精致
• 行高随字号反向变化：字越大行高比例越小，导出里已内置
• 最小视口填 360、最大填 1200 是最常见的移动优先组合

常见问题