Về công cụ này
Kiểu chữ responsive truyền thống nhảy giữa các kích thước cố định tại mỗi điểm ngắt media query — 16px trên di động, rồi đột ngột nhảy lên 20px khi vượt qua một chiều rộng nhất định. `clamp(TỐI THIỂU, ƯU TIÊN, TỐI ĐA)` trong CSS thay thế bước nhảy đó bằng việc co giãn liên tục: cỡ chữ tăng dần mượt mà, đồng bộ với viewport, giữa mức tối thiểu và tối đa bạn chọn. Dưới chiều rộng viewport tối thiểu, nó "cố định" ở kích thước tối thiểu; trên chiều rộng tối đa, nó cố định ở kích thước tối đa. Chỉ ở khoảng giữa nó mới linh hoạt.
Công cụ này tính toán phép nội suy giúp bạn: nó tính độ dốc tuyến tính giữa cỡ chữ tối thiểu và tối đa trên phạm vi viewport bạn chọn, biểu diễn nó dưới dạng giá trị ưu tiên dựa trên `vw`, và gói tất cả vào một chuỗi `clamp()` sẵn sàng để dán. Dán kết quả trực tiếp vào `font-size` (hoặc bất kỳ thuộc tính số nào khác) — không còn cần ghi đè riêng cho từng điểm ngắt để chỉnh tỉ lệ chữ.
Câu hỏi thường gặp
Tại sao dùng clamp() thay vì chỉ media query?
Media query nhảy giữa các kích thước cố định tại các breakpoint, trong khi clamp() co giãn mượt mà và liên tục giữa giá trị tối thiểu và tối đa của bạn khi viewport thay đổi kích thước — không có "nhảy" rõ rệt ở bất kỳ chiều rộng nào.
clamp() có hoạt động trên tất cả trình duyệt không?
Có — CSS clamp() đã được hỗ trợ trên tất cả các trình duyệt lớn (Chrome, Firefox, Safari, Edge) từ năm 2020, vì vậy có thể an toàn sử dụng trong sản xuất mà không cần phương án dự phòng cho hầu hết người dùng ngày nay.