CSS流体排版生成器

反馈
二维码
手机扫码查看
收藏
Parameter

编辑器加载中...

编辑器加载中...

CSS流体排版生成器介绍

CSS流体排版生成器用于让字体大小在不同视口宽度下平滑变化,适合构建响应式排版体系。工具支持设置最小/最大字号、视口范围、行高与字重,并生成基于 clamp 的 CSS。

主要参数说明

  • Min Size / Max Size:设置字体的最小与最大字号。
  • Min Viewport / Max Viewport:设置计算 clamp 的视口范围。
  • Line Height:设置行高。
  • Weight:设置字体字重。

使用教程

  1. 设置字号范围:配置最小与最大字号。
  2. 设定视口:输入最小与最大视口宽度。
  3. 调整排版:设置行高与字重。
  4. 复制代码:在 CSS 标签页复制生成代码。

应用场景

  • 响应式标题:标题随屏幕宽度自适应变化。
  • 内容排版:正文阅读体验在不同设备一致。
  • 设计系统:统一流体排版规范。