簡化的流體版式

流體排版是指字體大小（以及可能的其他字體屬性，如行高）根據屏幕大小（或者如果我們有的話，容器查詢）而變化的理念。

其核心技巧在於視口單位。您可以直接使用視口單位設置字體（例如font-size: 4vw ），但是大小的波動非常劇烈，通常不可取。這可以通過使用類似font-size: calc(16px 1vw)的方法來緩和。但是，既然我們已經開始使用複雜的計算，最常見的實現方法最終變成了一個用普通英語表達的等式：

我希望字體大小在320 像素屏幕上為16 像素，在1000 像素屏幕上為22 像素。

最終結果如下：

 html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

這實際上是設置了字體的最小值和最大值，以防止字體縮小或增大到過大的程度。 “CSS 鎖定”是Tim Brown 創造的一個術語。

您說是最小值和最大值？ ！碰巧的是， min()和max()函數已經以這些形式進入了CSS 規範。

因此，我們可以使用單行代碼簡化上面的複雜設置並保持鎖定：

 html {
  font-size: min(max(1rem, 4vw), 22px);
}

我們實際上可能想就此打住，因為儘管Safari (11.1 ) 和Chrome (79 ) 目前都支持此功能，但這已經是目前所能達到的最大支持範圍了。說到這裡，您可能需要在此之前添加一個font-size聲明，以設置一個沒有復雜函數的合理回退值。

但是，只要我們還在挑戰極限，還有另一個函數可以進一步簡化事情： clamp() ！ clamp()接受三個值：最小值、最大值和中間的靈活單位（或計算或任何其他內容），如果值在最小值和最大值之間，它將使用中間值。因此，我們的單行代碼變得更小了：

 body {
  font-size: clamp(100%, 1rem 2vw, 24px);
}

這將適用於Chrome 79 （尚未發佈到穩定版，但很快就會發布）。

Dave 叔非常高興FitText 現在只有幾字節大小，而不是整個jQuery 加上40 多行代碼。這是Dave 向其添加CSS 自定義屬性的情況：

剛剛看到這個不錯的解釋：

早上開發者新聞：CSS clamp可用於流體排版。 ?

? clamp在MDN 上： https://www.php.cn/link/4ac20f72e05b86b3dc759608b60f5d67

視頻替代文本：示例展示瞭如何將clamp用於h1 元素的流體/響應式排版pic.twitter.com/9iiCxxXJO7

— Stefan Judis (@stefanjudis) 2020 年4 月20 日

以上是簡化的流體版式的詳細內容。更多資訊請關注PHP中文網其他相關文章！