響應(yīng)式排版過去嘗試過多種方法，例如媒體查詢和 CSS calc()。

本文將探討一種不同的方法，即隨著視口寬度增加，在最小和最大尺寸之間線性縮放文本，目的是使其在不同屏幕尺寸下的行為更可預(yù)測——所有這些都只需一行 CSS 代碼，這要歸功于 clamp()。

CSS 函數(shù) clamp() 功能強大。它對各種用途都有效，但對于排版尤其有用。其工作原理如下：它接受三個值：

<code>clamp(minimum, preferred, maximum);</code>

它返回的值將是首選值，直到該首選值低于最小值（此時將返回最小值）或高于最大值（此時將返回最大值）。

那么，假設(shè)您沒有設(shè)置奇怪的值并在最小值和最大值之間設(shè)置它，它難道總是首選值嗎？嗯，您應(yīng)該使用首選值的公式，例如：

<code>.banner {
? width: clamp(200px, 50%   20px, 800px); /* 是的，您可以在 clamp() 中進(jìn)行數(shù)學(xué)運算！*/
}</code>

假設(shè)您希望在視口寬度為 360px 或以下時將元素的最小字體大小設(shè)置為 1rem，并在視口寬度為 840px 或以上時將最大字體大小設(shè)置為 3.5rem。

換句話說：

<code>1rem ? = 360px 及以下
縮放 = 361px - 839px
3.5rem = 840px 及以上</code>

任何介于 361 像素和 839 像素之間的視口寬度都需要一個在 1rem 和 3.5rem 之間線性縮放的字體大小。使用 clamp() 實際上非常容易！例如，在視口寬度為 600 像素（介于 360 像素和 840 像素之間）的情況下，我們將獲得 1rem 和 3.5rem 之間的中間值，即 2.25rem。

我們嘗試使用 clamp() 實現(xiàn)的目標(biāo)稱為線性插值：獲取兩個數(shù)據(jù)點之間的中間信息。

以下是執(zhí)行此操作的四個步驟：

步驟 1

選擇最小和最大字體大小，以及最小和最大視口寬度。在我們的示例中，字體大小為 1rem 和 3.5rem，寬度為 360px 和 840px。

步驟 2

將寬度轉(zhuǎn)換為 rem。由于大多數(shù)瀏覽器上的 1rem 默認(rèn)情況下為 16px（稍后會詳細(xì)介紹），因此我們將使用它。因此，最小和最大視口寬度將分別為 22.5rem 和 52.5rem。

步驟 3

在這里，我們將稍微偏向數(shù)學(xué)方面。當(dāng)組合在一起時，視口寬度和字體大小在 X 和 Y 坐標(biāo)系上形成兩點，而這些點構(gòu)成一條線。

我們需要這條線——更具體地說，我們需要它的斜率及其與 Y 軸的交點。以下是計算方法：

<code>slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
yAxisIntersection = -minWidth * slope   minFontSize</code>

這使我們得到斜率值為 0.0833，Y 軸交點值為 -0.875。

步驟 4

現(xiàn)在我們構(gòu)建 clamp() 函數(shù)。首選值的公式為：

<code>preferredValue = yAxisIntersection[rem]   (slope * 100)[vw]</code>

因此，該函數(shù)最終如下所示：

<code>.header {
? font-size: clamp(1rem, -0.875rem   8.333vw, 3.5rem);
}</code>

您可以在以下演示中可視化結(jié)果：

繼續(xù)操作并試用它。如您所見，當(dāng)視口寬度為 840px 時，字體大小停止增長，當(dāng)視口寬度為 360px 時，字體大小停止減小。介于兩者之間的所有內(nèi)容都以線性方式變化。

如果用戶更改根字體大小怎么辦？

您可能已經(jīng)注意到這種方法的一個小缺陷：它只有在根字體大小是您認(rèn)為的大小（在前面的示例中為 16px）并且從不更改時才有效。

我們通過將其除以 16 來將寬度 360px 和 840px 轉(zhuǎn)換為 rem 單位，因為我們假設(shè)這是根字體大小。如果用戶將其首選項設(shè)置為另一個根字體大小，例如 18px 而不是默認(rèn)的 16px，則該計算將出錯，并且文本不會按我們預(yù)期的那樣調(diào)整大小。

我們這里只有一種方法可以使用，那就是 (1) 在頁面加載時在代碼中進(jìn)行必要的計算，(2) 偵聽根字體大小的變化，以及 (3) 如果發(fā)生任何變化，則重新計算所有內(nèi)容。

這是一個有用的 JavaScript 函數(shù)來進(jìn)行計算：

// 獲取以像素為單位的視口寬度和以 rem 為單位的字體大小
function clampBuilder(minWidthPx, maxWidthPx, minFontSize, maxFontSize) {
  const root = document.querySelector("html");
  const pixelsPerRem = Number(getComputedStyle(root).fontSize.slice(0, -2));

  const minWidth = minWidthPx / pixelsPerRem;
  const maxWidth = maxWidthPx / pixelsPerRem;

  const slope = (maxFontSize - minFontSize) / (maxWidth - minWidth);
  const yAxisIntersection = -minWidth * slope   minFontSize;

  return `clamp(${minFontSize}rem, ${yAxisIntersection}rem   ${slope * 100}vw, ${maxFontSize}rem)`;
}

// clampBuilder(360, 840, 1, 3.5) -> "clamp(1rem, -0.875rem   8.333vw, 3.5rem)"

我故意省略了如何將返回的字符串注入 CSS 中，因為根據(jù)您的需求以及您是否使用的是原生 CSS、CSS-in-JS 庫或其他內(nèi)容，有很多方法可以做到這一點。此外，沒有針對字體大小更改的原生事件，因此我們必須手動檢查。我們可以使用 setInterval 每秒檢查一次，但這可能會影響性能。

這更像是一個極端情況。很少有人更改其瀏覽器的字體大小，甚至更少的人會在訪問您的網(wǎng)站時更改它。但是，如果您希望您的網(wǎng)站盡可能具有響應(yīng)能力，那么這就是最佳方法。

對于那些不介意極端情況的人

更新：自從本文首次發(fā)表以來，此處共享的資源已停止工作。如果您正在尋找計算器來幫助確定各種視口下的字體大小，請考慮使用 Fluid Type Generator，它利用現(xiàn)代流體排版技術(shù)。

如何避免文本重新調(diào)整

對排版尺寸進(jìn)行如此細(xì)致的控制使我們能夠做其他很酷的事情——例如阻止文本在不同的視口寬度下重新調(diào)整。

這就是文本的正常行為。

但是現(xiàn)在，有了我們的控制，我們可以使文本保持相同的行數(shù)，始終在同一個單詞處換行，無論我們使用什么視口寬度。

那么我們該如何做到這一點呢？首先，字體大小和視口寬度之間的比率必須保持不變。在此示例中，我們從 320px 處的 1rem 變?yōu)?960px 處的 3rem。

<code>320 / 1 = 320
960 / 3 = 320</code>

如果我們使用前面編寫的 clampBuilder() 函數(shù)，則會變成：

const text = document.querySelector("p");
text.style.fontSize = clampBuilder(320, 960, 1, 3);

它保持相同的寬度與字體比率。我們這樣做的原因是，我們需要確保文本在每個寬度下都具有正確的大小，以便能夠保持相同的行數(shù)。它仍然會在不同的寬度下重新調(diào)整，但這對于我們接下來要做的工作是必要的。

現(xiàn)在我們必須從 CSS 字符 (ch) 單位獲得一些幫助，因為僅具有正確的字體大小是不夠的。一個 ch 單位相當(dāng)于元素字體中字形“0”的寬度。我們希望使文本主體與視口一樣寬，不是通過設(shè)置 width: 100%，而是使用 width: Xch，其中 X 是水平填充視口所需的 ch 單位（或 0）的數(shù)量。

要查找 X，我們必須將最小視口寬度 320px 除以元素在視口寬度為 320px 時的字體大小處的 ch 大小。在這種情況下為 1rem。

別擔(dān)心，這里有一個代碼片段來計算元素的 ch 大小：

// 返回元素在所需字體大小下的“0”字形的寬度（以像素為單位）
function calculateCh(element, fontSize) {
  const zero = document.createElement("span");
  zero.innerText = "0";
  zero.style.position = "absolute";
  zero.style.fontSize = fontSize;

  element.appendChild(zero);
  const chPixels = zero.getBoundingClientRect().width;
  element.removeChild(zero);

  return chPixels;
}

現(xiàn)在我們可以繼續(xù)設(shè)置文本的寬度：

function calculateCh(element, fontSize) { ... }

const text = document.querySelector("p");
text.style.fontSize = clampBuilder(320, 960, 1, 3);
text.style.width = `${320 / calculateCh(text, "1rem")}ch`;

哇，等等。發(fā)生了一些不好的事情。有一個水平滾動條弄亂了事情！

當(dāng)我們談?wù)?320px 時，我們談?wù)摰氖且暱诘膶挾龋?em>包括垂直滾動條。因此，文本的寬度設(shè)置為可見區(qū)域的寬度加上滾動條的寬度，這使其水平溢出。

那么為什么不使用不包含垂直滾動條寬度的度量呢？我們不能，這是因為 CSS vw 單位。請記住，我們正在使用 clamp() 中的 vw 來控制字體大小。您會看到，vw 包括垂直滾動條的寬度，這使得字體會隨著包括滾動條在內(nèi)的視口寬度一起縮放。如果我們想要避免任何重新調(diào)整，則寬度必須與視口寬度成比例，包括滾動條。

那么我們該怎么做呢？當(dāng)我們這樣做時：

text.style.width = `${320 / calculateCh(text, "1rem")}ch`;

……我們可以通過將其乘以小于 1 的數(shù)字來縮小結(jié)果。0.9 可以解決問題。這意味著文本的寬度將是視口寬度的 90%，這將足以彌補滾動條占用的小空間。我們可以通過使用更小的數(shù)字（例如 0.6）來使其更窄。

function calculateCh(element, fontSize) { ... }

const text = document.querySelector("p");
text.style.fontSize = clampBuilder(20, 960, 1, 3);
text.style.width = `${320 / calculateCh(text, "1rem") * 0.9}ch`;

您可能會傾向于簡單地從 320 中減去幾個像素以忽略滾動條，如下所示：

text.style.width = `${(320 - 30) / calculateCh(text, "1rem")}ch`;

這樣做的問題是它會使重新調(diào)整問題恢復(fù)！這是因為從 320 中減去會破壞視口與字體的比率。

文本的寬度必須始終是視口寬度的百分比。另一件需要注意的事情是，我們需要確保我們在使用該網(wǎng)站的每臺設(shè)備上都加載相同的字體。這聽起來很明顯，不是嗎？嗯，這里有一個小細(xì)節(jié)可能會使您的文本偏離。執(zhí)行諸如 font-family: sans-serif 之類的事情并不能保證在每個瀏覽器中都使用相同的字體。sans-serif 將在 Windows 版 Chrome 上設(shè)置 Arial，但在 Android 版 Chrome 上設(shè)置 Roboto。此外，某些字體的幾何形狀可能會導(dǎo)致重新調(diào)整，即使您做對了所有事情也是如此。等寬字體往往會產(chǎn)生最佳結(jié)果。因此，請務(wù)必確保您的字體準(zhǔn)確無誤。

在以下演示中查看此非重新調(diào)整示例：

容器內(nèi)的非重新調(diào)整文本

我們現(xiàn)在要做的就是將字體大小和寬度應(yīng)用于容器，而不是直接應(yīng)用于文本元素。其中的文本只需要設(shè)置為 width: 100%。對于段落和標(biāo)題，這并不是必需的，因為它們本身就是塊級元素，并且會自動填充容器的寬度。

在父容器中應(yīng)用此方法的一個優(yōu)點是，其子元素將自動響應(yīng)和調(diào)整大小，而無需逐個設(shè)置其字體大小和寬度。此外，如果我們需要更改單個元素的字體大小而不影響其他元素，我們只需將其字體大小更改為任何 em 值，它就會自然地相對于容器的字體大小。

非重新調(diào)整文本很挑剔，但它是一種微妙的效果，可以為設(shè)計帶來不錯的效果！

總結(jié)

為了總結(jié)，我整理了一個關(guān)于所有這些如何在現(xiàn)實場景中看起來的小演示。

在此最終示例中，您還可以更改根字體大小，并且 clamp() 函數(shù)將自動重新計算，以便文本在任何情況下都能具有正確的大小。

盡管本文的目標(biāo)是將 clamp() 與字體大小一起使用，但此相同的技術(shù)可用于接收長度單位的任何 CSS 屬性?，F(xiàn)在，我并不是說您應(yīng)該在任何地方都使用它。很多時候，一個好的 font-size: 1rem 就足夠了。我只是想向您展示需要時您可以擁有多少控制權(quán)。

就我個人而言，我相信 clamp() 是 CSS 中最好的東西之一，我迫不及待地想看看隨著它的越來越廣泛使用，人們會想出哪些其他用法！

以上是基于視口的CSS夾具線性縮放字體大小的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！