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

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

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

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

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

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

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

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

換句話說：

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

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

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

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

步驟1

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

步驟2

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

步驟3

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

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

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

這使我們得到斜率值為0.0833，Y 軸交點(diǎn)值為-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 時(shí)，字體大小停止增長，當(dāng)視口寬度為360px 時(shí)，字體大小停止減小。介於兩者之間的所有內(nèi)容都以線性方式變化。

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

您可能已經(jīng)註意到這種方法的一個(gè)小缺陷：它只有在根字體大小是您認(rèn)為的大?。ㄔ谇懊娴氖纠袨?6px）並且從不更改時(shí)才有效。

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

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

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

 // 獲取以像素為單位的視口寬度和以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 中，因?yàn)楦鶕?jù)您的需求以及您是否使用的是原生CSS、CSS-in-JS 庫或其他內(nèi)容，有很多方法可以做到這一點(diǎn)。此外，沒有針對字體大小更改的原生事件，因此我們必須手動(dòng)檢查。我們可以使用setInterval每秒檢查一次，但這可能會(huì)影響性能。

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

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

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

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

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

這就是文本的正常行為。

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

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

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

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

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

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

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

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

別擔(dān)心，這裡有一個(gè)代碼片段來計(jì)算元素的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ā)生了一些不好的事情。有一個(gè)水平滾動(dòng)條弄亂了事情！

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

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

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

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

……我們可以通過將其乘以小於1 的數(shù)字來縮小結(jié)果。 0.9 可以解決問題。這意味著文本的寬度將是視口寬度的90%，這將足以彌補(bǔ)滾動(dòng)條佔(zhàn)用的小空間。我們可以通過使用更小的數(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`;

您可能會(huì)傾向於簡單地從320 中減去幾個(gè)像素以忽略滾動(dòng)條，如下所示：

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

這樣做的問題是它會(huì)使重新調(diào)整問題恢復(fù)！這是因?yàn)閺?20 中減去會(huì)破壞視口與字體的比率。

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

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

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

我們現(xiàn)在要做的就是將字體大小和寬度應(yīng)用於容器，而不是直接應(yīng)用於文本元素。其中的文本只需要設(shè)置為width: 100% 。對於段落和標(biāo)題，這並不是必需的，因?yàn)樗鼈儽旧砭褪菈K級(jí)元素，並且會(huì)自動(dòng)填充容器的寬度。

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

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

總結(jié)

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

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

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

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

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