使用 clamp() 進行響應式設計

• 原文地址：clamp() for Responsive Design
• 原文做者：Caleb Hearth
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Alfxjx
• 校對者：z0gSh1u、HurryOwen

新的 CSS 函數 clamp() 提供了一種經過給目標值設置最大最小值的範圍來計算實際值方法。它的語法是 clamp([min], [calculated], [max])。當你基於屏幕尺寸，使用長度單位 vw 來縮放一些值時，這個函數頗有用。

該項技術很適用於跨多種屏幕尺寸的設計。常規的方法是根據屏幕的寬度使用媒體查詢的方法來對樣式作不一樣的調整，可是這麼作致使咱們在開發的時候要麼以「移動端優先」爲原則，開發小屏幕的應用，再按比例增長；要麼是以「桌面端優先」爲原則，開發適用於大屏幕的應用，再按比例縮小。經過使用 clamp() 函數，用一個已知的最大最小值來約束變化的範圍，咱們開發人員能夠減小對於樣式響應式斷點的依賴，這樣就無需爲了一致性檢查不少種不一樣的寬度了。

運河閘能夠使船經過不一樣水位的水域

爲了理解 clamp() 是如何工做的，我喜歡用運河閘的比喻。運河閘使用兩個能夠升高和下降的船閘，以使船隻能夠越過它們。一旦船在閘板之間，則從高水位側添加水或將水排到低水位側，以分別升高或下降閘板之間的水位。這使船能夠隨水位輕輕浮動並在最小和最大水位之間移動。

更具體地說，clamp(100%, calc(1em + 1vw), 200%) 的效果與 max(100%, min(calc(1em + 1vw), 200%)) 相同。最神奇的就是中間的這個參數 calc(1em + 1vw)，將瀏覽器的寬度（或者說，視口的寬度）代入了計算之中。1vw 至關於視口寬度的 1%，所以 1em 加上視口寬度的 1% 的計算結果會隨着瀏覽器的大小調整而變更。

讓咱們來看看咱們是怎樣經過此方法來調整字號大小的。下面的這個例子和我在個人我的網站上使用的方式很是相近：

body {
  font-size: clamp(100%, calc(1rem + 2vw), 1.375rem);
}
複製代碼

拆分下來看，100% 一般表示着「當前頁面的基本尺寸」，對於字號而言就是 16px。calc(1rem + 2vw) 使用 rem（一樣是 16px ）加上視口寬度的 2% 來進行計算。1.375rem 則是我理想狀況下的最大字號，爲 22px。

clamp() 以及相關的 min() 和 max() 函數在本文寫做之時都有了很好的瀏覽器支持：

在 MDN 中，clamp() 適用於任何使用了數字、百分數以及其餘長度單位的樣式中。但奇怪的是，當我嘗試將其應用到 line-height 時，我發現 Safari 14 應該是支持 line-height: clamp(...) 這樣的寫法的（我嘗試了 @supports），可是實際狀況倒是回退到了基準的 line-height ，很是使人費解。最終我使用 line-height: min(calc(1.1em + 1vw), 32px) 從而實現了 line-height 響應式地根據個人內容高度來肯定。這裏不須要設置一個最小值，由於我測試的寬度都不是很小，可是若是有最小值的需求的話，能夠在最外層包裹一個 max()：line-height: max(100%, min(calc(1.1em + 1vw), 32px))。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。