px 是我們熟悉且常用的 CSS 單位，但在如今這個設(shè)備屏幕尺寸千差萬別的時代，px 似乎不再像以前那么好用。

分享一個強大的 CSS 新特性，它將改變我們編寫響應(yīng)式樣式的方式，讓我們告別繁瑣的媒體查詢，輕松實現(xiàn)流暢的“流體式”布局。

px 的問題

px 是一個絕對單位，它代表屏幕上的一個物理像素點，這意味著 width: 300px; 在任何設(shè)備上都會試圖渲染成 300 個像素點寬。

為了解決不同尺寸設(shè)備渲染的問題，傳統(tǒng)的做法是使用大量的媒體查詢（@media）：

.title {
 font-size: 48px;
}

@media (max-width: 768px) {
 .title {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
 .title {
    font-size: 24px;
  }
}

僅為了一個字體大小，就寫了這么多代碼。如果再加上 padding、margin、width… 代碼會變得臃腫不堪，難以維護(hù)。更重要的是，這種“階梯式”的調(diào)整是不連貫的，在斷點之間，布局仍然是僵硬的。

CSS 數(shù)學(xué)函數(shù) clamp()

clamp() 的語法非常簡單：clamp(MIN, PREFERRED, MAX)。

瀏覽器會首先嘗試使用 PREFERRED 值，如果 PREFERRED 值小于 MIN，則采用 MIN 值，反之，則采用 MAX 值。

流體式字體排版

讓我們用 clamp() 來重寫剛才的字體大小示例：

讓我們來解讀一下這行代碼的魔力：

• 1.5rem (最小值)：在非常窄的屏幕上（如手機），字體大小最小為 1.5rem（約 24px），保證可讀性
• 5vw (首選值)：字體大小根據(jù)視口寬度進(jìn)行動態(tài)縮放，5vw 意味著字體大小是視口寬度的 5%。當(dāng)用戶縮放瀏覽器窗口時，字體會如絲般順滑地變大或變小
• 3rem (最大值)：在非常寬的屏幕上（如 4K 顯示器），字體大小最大為 3rem（約 48px），保持美觀

最終，字體大小會在 24px 到 48px 之間根據(jù)屏幕寬度平滑地過渡，不再有斷點之間的跳變，這是真正的“流體式”設(shè)計！

clamp() 在布局中的應(yīng)用

clamp() 的威力遠(yuǎn)不止于此，我們可以將它應(yīng)用到任何需要動態(tài)調(diào)整的地方：

例如我們想讓一個內(nèi)容區(qū)塊的寬度自適應(yīng)，但又不想它在小屏幕上太窄，或在大屏幕上太寬？

.container {
  width: clamp(320px, 90%, 1200px);
  margin: 0 auto;
}

• 在小屏幕上，寬度是 90%，但最小不會低于 320px
• 在超大屏幕上，寬度也是 90%，但最大不會超過 1200px

是時候從 px 的思維定勢中解放出來了，clamp() 這個現(xiàn)代 CSS 特性，并不是什么遙不可及的黑科技，它們的瀏覽器兼容性已經(jīng)非常好（主流瀏覽器早已支持）。