夹具

在此演示中，您将使用 clamp() 设置宽度，如下所示：width: clamp(<min>, <actual>, <max>)。

这会设置绝对的最小和最大尺寸以及实际尺寸。如果指定了值，则结果可能如下所示：

.parent {
  width: clamp(23ch, 60%, 46ch);
}

在此处，最小尺寸为 23ch 或 23 个字符，最大尺寸为 46ch，即 46 个字符。字符宽度单位：基于元素的字体大小（具体而言就是 0 字形的宽度）。“实际”尺寸为 50%，表示此元素父项宽度的 50%。

这里，clamp() 函数的作用是让此元素保留 50% 的宽度，直到 50% 大于 46ch（在较宽的视口上）或小于 23ch（在较小的视口上）为止。在该视频中，观看当父级拉伸和缩小时，此卡片的宽度如何增加到其固定上限，并减少到其固定最小值。然后，它会使用其他属性将其居中放置在父级中。这样可以使布局更清晰，因为文本不会过宽（超过 46ch），也不会挤压和窄（小于 23ch）。

您可以使用此方法实现自适应排版。例如 font-size: clamp(1.5rem, 20vw, 3rem)。在这种情况下，标题的字体大小会始终介于 1.5rem 和 3rem 之间，但会根据 20vw 实际值进行缩放，以适应视口的宽度。

这是一种通过最小和最大尺寸值确保易读性的绝佳技术，但请注意，它并非在所有现代浏览器中都受支持，因此请确保您有后备广告并进行测试。

HTML

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }