插入卡

在本示範中，您會使用 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%;
  }