0Pricing
CSS Academy · 课时

Min、Max 与 Clamp 函数

使用 min()、max() 和 clamp() 实现能够响应容器或视口尺寸的自适应大小。

Min、Max 与 Clamp 函数 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

为什么使用 CSS 比较函数？

CSS 比较函数可以让您无需 JavaScript 就表达条件式尺寸设置：“使用这个尺寸，但不能小于或大于这些边界。”它们是现代流式响应式设计的核心。

min() 函数

min() 会返回逗号分隔值列表中的最小值。浏览器会根据当前视口大小，选择其中最小的值。

<div class="container">Container width: min(800px, 90%)</div>

max() 函数

max() 会返回最大值。它适合设置能够继续增长的最小尺寸。

<p>Text sized with max(1rem, 2vw)</p>

clamp() 函数

clamp(min, preferred, max) 会将一个值限制在最小值和最大值之间。首选值通常是流式的（例如 vw）。

<h1>Clamped Heading</h1>

用于流式排版的 clamp()

使用 clamp() 实现流式排版后，无需再为多个媒体查询设置不同的字体大小覆盖规则：

<h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>Body copy that scales fluidly with the viewport.</p>

用于流式间距的 clamp()

间距也可以应用相同的模式，从而让外边距和内边距自然地适应不同屏幕：

<div class="section">Section with fluid padding</div>

用于容器的 min()

一种安全的容器模式：宽度不会超过最大宽度，也不会产生水平滚动：

<div class="wrapper">Safe wrapper container</div>

嵌套函数

您可以嵌套比较函数来构造复杂表达式：

<p class="hero-text">Nested min/max inside clamp()</p>

结合使用 calc() 和 clamp()

在 clamp() 中使用 calc()，可以在两个尺寸之间进行精确的流式插值：

<h1>Precise fluid heading</h1>

min-content、max-content 和 fit-content

CSS 还提供了关键字尺寸值：

  • min-content：不会溢出的最小可能尺寸
  • max-content：占用内容所需的全部空间
  • fit-content()：类似于 max-content，但会限制在提供的上限以内
<span class="tag">Tag label</span>

浏览器支持

min()、max() 和 clamp() 得到所有现代浏览器的支持。无需添加前缀。只要需要使用长度、频率、时间或数值，就可以使用这些函数。

快速检查

一个标题在宽度为 600px 的视口上使用 font-size: clamp(1rem, 4vw, 3rem)。字体大小是多少？

回顾

min() 选择较小的值，max() 选择较大的值。clamp(min, preferred, max) 将流式值限制在指定范围内。这些函数为现代流式排版和间距提供支持，通常可以省去多个媒体查询覆盖规则。

常见问题解答

「Min、Max 与 Clamp 函数」课时是免费的吗？

是的 — 「Min、Max 与 Clamp 函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Min、Max 与 Clamp 函数」这节课中我会学到什么？

使用 min()、max() 和 clamp() 实现能够响应容器或视口尺寸的自适应大小。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「Min、Max 与 Clamp 函数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 绝对单位：px、pt、cm
  2. 相对单位：em 与 rem
  3. 视口单位：vw、vh、dvh
  4. Min、Max 与 Clamp 函数
← 返回 CSS Academy