clamp()

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本中运行。它从 2020 年 7 月.

clamp() CSS 函数 将中间值限制在定义的最小边界和最大边界之间的值范围内。该函数接受三个参数：最小值、首选值和最大允许值。

试用

请注意，在这些示例中，将 clamp() 用于字体大小，可以设置随着视窗大小增长的字体大小，但不会低于最小字体大小或高于最大字体大小。它与 Fluid Typography 中的代码具有相同的效果，但只有一行，并且不使用媒体查询。

语法

css
/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

参数

clamp(min, val, max) 函数接受三个用逗号分隔的表达式作为其参数。

min

最小值是最小（最负）值。这是允许值范围的下限。如果首选值小于此值，则将使用最小值。

val

首选值是只要结果在最小值和最大值之间，其值将用作属性值的表达式。

max

最大值是将属性值分配给该值的表达式值，如果首选值大于此上限，则将分配给该值。

表达式可以是数学函数（有关更多信息，请参阅 calc()）、字面量值、其他计算结果为有效参数类型的表达式（如 <length>）或嵌套的 min() 和 max() 函数。对于数学表达式，您可以使用加法、减法、乘法和除法，而无需使用 calc() 函数本身。您也可以使用括号在需要时确定计算顺序。

您可以在表达式中的每个值中使用不同的单位，以及在组成任何参数的任何数学函数中使用不同的单位。

在使用该函数时，请牢记以下方面

  • 在自动和固定布局表中，表列、表列组、表行、表行组和表格单元格的宽度和高度的百分比涉及的数学表达式 *可能* 被视为指定了 auto。
  • 允许嵌套 max() 和 min() 函数作为表达式值，在这种情况下，内部函数被视为简单的括号。表达式是完整的数学表达式，因此您可以在不使用 calc() 函数本身的情况下使用直接加法、减法、乘法和除法。
  • 表达式可以是组合了加法 ( + )、减法 ( - )、乘法 ( * ) 和除法 ( / ) 运算符的值，使用标准运算符优先级规则。确保在 + 和 - 运算符的两侧都留有空格。表达式中的运算符可以是任何 <length> 语法值。您可以在表达式中的每个值中使用不同的单位。您也可以使用括号在需要时确定计算顺序。
  • 通常您会想要在 clamp() 函数中使用 min() 和 max()。

返回值

clamp(MIN, VAL, MAX) 被解析为 max(MIN, min(VAL, MAX))。

根据提供的参数，该函数返回 <length>、<frequency>、<angle>、<time>、<percentage>、<number> 或 <integer>.

正式语法

<clamp()> = 
  clamp( [ <calc-sum> | none ] , <calc-sum> , [ <calc-sum> | none ] )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

示例

min()、max() 和 clamp() 比较

在此示例中，我们有一个使用 min()、max() 和 clamp() 来响应地设置大小的网页。

该示例通过三种方式调整页面元素的大小

  • 文本行长度
  • 段落文本的字号
  • 标题文本的字号

在这三种情况下，页面都使用视窗相对单位（vw 和 <percentage>）的组合来设置随视窗宽度变化的大小，以及非视窗相对值（rem 和 px）来实现最小和/或最大尺寸。

示例位于 https://mdn.github.io/css-examples/min-max-clamp/。在新窗口中打开它，并尝试调整窗口宽度。

行长（由 width 属性控制，该属性作用于 <body> 元素）随着窗口宽度的增加而增加，但只增加到一定程度（1000px），超过该点，它将不再增加。我们使用 min() 来设置最大行长：它可以低于 1000px，但不会超过它。这很有用，因为长行更难阅读，因此我们通常希望限制行的长度。为了实现这一点，我们使用 min(1000px, calc(70% + 100px))：当基于百分比的计算结果超过 1000px 时，我们将切换到固定的 1000px 值。

段落文本的大小（由 font-size 属性控制，该属性作用于 <p> 元素）随着窗口变窄而减小，但只减小到一定程度，超过该点（1.2vw 小于 1.2rem 的点），它不会变得更小：它将保持在 1.2rem。我们使用 max() 来设置最小字号：字号可以大于 1.2rem，但永远不会低于它。这很有用，因为非常小的文本很难阅读。为了实现这一点，我们使用 max(1.2rem, 1.2vw)。这意味着 font-size 将设置为 1.2rem，除非 1.2vw 的计算值大于 1.2rem 的计算值，在这种情况下，它将改为设置为 1.2vw。

标题文本的大小（由 font-size 属性控制，该属性作用于 <h1> 元素）具有视窗相对值，同时具有最大和最小阈值。为了实现这一点，我们使用 clamp(1.8rem, 2.5vw, 2.8rem)。视窗相对值为 2.5vw，但它夹在 1.8rem 和 2.8rem 之间，因此

  • 如果 2.5vw 的计算值小于 1.8rem，则使用 1.8rem
  • 如果 2.5vw 的计算值大于 2.8rem，则使用 2.8rem。

这可以防止标题文本在非常窄的窗口中变得太小，或者在非常宽的窗口中变得太大。

HTML

html
<h1>Simple responsive test</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
  eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
  eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
  Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
  libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
  lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
  risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
  imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
  Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
  vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
  Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
  nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>

<p>
  Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
  facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
  quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
  ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
  quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>

CSS

css
html {
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

规范

规范
CSS 值和单位模块级别 4
# calc 表示法

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅