菜鸟教程
Reference CSS reference

CSS clamp() 参考

clamp() 用于在最小值、首选值和最大值之间计算 CSS 值，常用于响应式字号、宽度、间距和布局尺寸。

语法

css 
font-size: clamp(1rem, 2vw + 0.5rem, 2rem);

参数

text 
clamp(最小值, 首选值, 最大值)
  • 最小值：不会小于这个值。
  • 首选值：浏览器优先尝试使用的动态值。
  • 最大值：不会大于这个值。

可运行演示

在线代码演示
源码 
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>clamp 字号演示</title>
    <style>
      body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; }
      article { max-width: 760px; margin: 0 auto; padding: 20px; border: 1px solid #dbeafe; border-radius: 12px; background: #fff; }
      h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.1; }
      p { font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem); color: #475569; }
    </style>
  </head>
  <body>
    <article>
      <h1>响应式标题</h1>
      <p>clamp() 让字号在最小值和最大值之间随视口宽度变化。</p>
    </article>
  </body>
</html>

常见错误

  • 首选值没有动态单位，例如 clamp(16px, 20px, 32px) 没有响应式意义。
  • 最小值大于最大值，结果不符合预期。
  • 过度使用 viewport 单位，导致超宽屏文字过大；应设置合理最大值。

相关内容

相关内容