0Pricing
CSS Academy · 课时

使用 min()、max() 与 clamp() 实现流式值

使用 min()、max() 和 clamp() 简写，将值限制在最小值和最大值之间。

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

为什么需要比较函数？

CSS 比较函数（min()、max()、clamp()）可以在无需媒体查询的情况下，根据上下文调整响应式尺寸，比基于断点的方案更加优雅简洁。

min() — 选择最小值

min(a, b, ...) 会计算所有参数并使用其中的最小值。这里的“最小”指的是视觉结果，也就是限制最严格的选项。

  <div class="container">Container</div>

max() — 选择最大值

max(a, b, ...) 会选择最大值，从而确保始终达到最低下限。

  <p>Responsive text</p>

clamp(min, preferred, max)

clamp() 会将值限制在一个范围内。首选值（中间参数）通常是流式值，最小值和最大值则提供绝对边界。

  <h1>Clamped Heading</h1>

clamp() 流式排版比例

为每个标题级别使用一个 clamp()，替代多个断点覆盖规则：

  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>

clamp() 流式间距

也可以将流式尺寸应用于内边距、外边距和间距，这是实现“内在式”设计的关键技术：

  <div class="section">
    <div class="grid"><div>A</div><div>B</div></div>
  </div>

使用 min() 限制宽度

最简洁的容器模式：始终占视口宽度的 90%，但不会超过 1200px，只需一个表达式即可实现：

  <div class="wrapper">Wrapper</div>

使用 max() 设置字体大小下限

确保正文在小视口中也不会变得过小：

  <p class="text-body">Body text that never gets too small.</p>

嵌套使用 min/max/clamp

可以嵌套这些函数来实现复杂的限制：

  <div class="element">Padded element</div>

Grid 中的比较函数

在 minmax() 中使用 min()，为列设置更安全的下限：

  <div class="grid"><div>Card</div></div>

浏览器支持

这三个比较函数都受到现代浏览器的完整支持（Chrome 79+、Firefox 75+、Safari 11.1+）。无需使用厂商前缀。

快速检查

某个标题使用了 font-size: clamp(1rem, 3vw, 2.5rem)。在多宽的视口中，3vw 等于 1rem（假设根元素为 16px）？

回顾

min() 选择较小的值（上限）。max() 选择较大的值（下限）。clamp(min, preferred, max) 会限制流式值的范围。三者结合使用，可以在无需媒体查询的情况下实现流式排版和间距。最强大的模式是使用 clamp(1.5rem, 4vw, 3rem) 创建自动响应式标题。

常见问题解答

「使用 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 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「使用 min()、max() 与 clamp() 实现流式值」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 使用 calc() 进行动态计算
  2. 使用 min()、max() 与 clamp() 实现流式值
  3. Grid 中的 repeat() 与 minmax()
  4. color-mix() 与相对颜色语法
← 返回 CSS Academy