px 是我們熟悉且常用的 CSS 單位，但在如今這個設備屏幕尺寸千差萬別的時代，px 似乎不再像以前那么好用。
分享一個強大的 CSS 新特性，它將改變我們編寫響應式樣式的方式，讓我們告別繁瑣的媒體查詢，輕松實現(xiàn)流暢的“流體式”布局。
px 的問題
px 是一個絕對單位，它代表屏幕上的一個物理像素點，這意味著 width: 300px; 在任何設備上都會試圖渲染成 300 個像素點寬。
為了解決不同尺寸設備渲染的問題，傳統(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… 代碼會變得臃腫不堪，難以維護。更重要的是，這種“階梯式”的調整是不連貫的，在斷點之間，布局仍然是僵硬的。
CSS 數(shù)學函數(shù) clamp()
clamp() 的語法非常簡單：clamp(MIN, PREFERRED, MAX)。
瀏覽器會首先嘗試使用 PREFERRED 值，如果 PREFERRED 值小于 MIN，則采用 MIN 值，反之，則采用 MAX 值。
流體式字體排版
讓我們用 clamp() 來重寫剛才的字體大小示例：
.title {
/* clamp(最小值，首選值，最大值)*/
font-size:clamp(1.5rem，5vw，3rem);
}?
讓我們來解讀一下這行代碼的魔力：
1.5rem (最小值)：在非常窄的屏幕上（如手機），字體大小最小為 1.5rem（約 24px），保證可讀性5vw (首選值)：字體大小根據(jù)視口寬度進行動態(tài)縮放，5vw 意味著字體大小是視口寬度的 5%。當用戶縮放瀏覽器窗口時，字體會如絲般順滑地變大或變小3rem (最大值)：在非常寬的屏幕上（如 4K 顯示器），字體大小最大為 3rem（約 48px），保持美觀
最終，字體大小會在 24px 到 48px 之間根據(jù)屏幕寬度平滑地過渡，不再有斷點之間的跳變，這是真正的“流體式”設計！
clamp() 在布局中的應用
clamp() 的威力遠不止于此，我們可以將它應用到任何需要動態(tài)調整的地方：
例如我們想讓一個內(nèi)容區(qū)塊的寬度自適應，但又不想它在小屏幕上太窄，或在大屏幕上太寬？
.container {
width: clamp(320px, 90%, 1200px);
margin: 0 auto;
}
- 在小屏幕上，寬度是
90%，但最小不會低于 320px - 在超大屏幕上，寬度也是
90%，但最大不會超過 1200px
是時候從 px 的思維定勢中解放出來了，clamp() 這個現(xiàn)代 CSS 特性，并不是什么遙不可及的黑科技，它們的瀏覽器兼容性已經(jīng)非常好（主流瀏覽器早已支持）。
該文章在 2025/9/28 10:35:09 編輯過
400 186 1886
