clamp() function dùng để làm gì?

clamp(min, ưa-thích, max) khoá một giá trị trong khoảng, và co giãn liên tục ở giữa.

h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
/* nhỏ nhất 1.5rem, lớn nhất 2.5rem, ở giữa thì bằng 4% bề rộng viewport */

.container { width: clamp(320px, 90%, 1180px); }
.section   { padding-inline: clamp(16px, 4vw, 32px); }

Thay thế cho việc nhảy bậc bằng media query:

/* cách cũ: đổi đột ngột tại từng ngưỡng */
h1 { font-size: 1.5rem; }
@media (min-width: 768px)  { h1 { font-size: 2rem; } }
@media (min-width: 1200px) { h1 { font-size: 2.5rem; } }

Công thức thường dùng cho fluid typography — trộn rem với vw để vẫn co theo cỡ chữ người dùng đặt:

font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);

Lưu ý 1: dùng thuần vw ở phần giữa (clamp(1rem, 4vw, 2rem)) làm chữ không đổi theo thiết lập cỡ chữ của hệ điều hành khi đang ở giữa khoảng — người cần chữ to phóng lên không thấy đổi. Kèm rem như công thức trên là an toàn.

Lưu ý 2: nếu min lớn hơn max, clamp trả về min — không báo lỗi, chỉ lặng lẽ sai.