Máy tính CSS clamp() cho chữ & khoảng cách linh hoạt

clamp() trong CSS là gì?

clamp(MIN, PREFERRED, MAX) trả về giá trị ưu tiên, nhưng không bao giờ nhỏ hơn MIN hay lớn hơn MAX. Khi giá trị ưu tiên tăng theo viewport — ví dụ 0.8239rem + 0.7512vw — bạn sẽ có cỡ chữ và khoảng cách linh hoạt, co giãn mượt giữa kích thước điện thoại và máy tính mà không cần nhiều media query. Hàm này hoạt động trên mọi trình duyệt hiện đại.

Công thức, từng bước

Kích thước linh hoạt là một đường thẳng nối hai điểm: (viewport tối thiểu, kích thước tối thiểu) và (viewport tối đa, kích thước tối đa). Với 16px ở 375px và 24px ở 1440px:

1. Độ dốc = (24 − 16) ÷ (1440 − 375) = 0.007512 — kích thước tăng 0.0075px cho mỗi pixel viewport.
2. Phần vw = độ dốc × 100 = 0.7512vw, vì 1vw bằng 1% chiều rộng viewport.
3. Hệ số chặn = 16 − 0.007512 × 375 = 13.183px = 0.8239rem với root 16px.
4. Kết quả: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem). Ở viewport 768px, giá trị là 13.183 + 0.007512 × 768 ≈ 18.95px.

Vì sao kết hợp rem và vw?

Kích thước chỉ dùng vw sẽ bỏ qua việc phóng to trình duyệt và cỡ chữ mặc định của người dùng, nên có thể không đạt WCAG 1.4.4 (Thay đổi kích thước văn bản). Giữ phần chặn bằng rem giúp giá trị vẫn phản ứng khi người dùng phóng to hoặc đặt cỡ chữ mặc định lớn hơn. Quy tắc tham khảo: nếu giá trị tối đa không quá 2.5 lần giá trị tối thiểu, văn bản vẫn đạt mức phóng to 200% — máy tính sẽ cảnh báo những dải vượt quá giới hạn này.

Thang chữ và thang khoảng cách linh hoạt

Thay vì tính từng tiêu đề riêng lẻ, hãy định nghĩa một thang modular: mỗi bước nhân cỡ cơ sở với một tỉ lệ. Tỉ lệ nhỏ hơn trên di động (ví dụ 1.2, minor third) và lớn hơn trên máy tính (ví dụ 1.25, major third) giúp tiêu đề nổi bật trên màn hình lớn mà không quá khổ trên điện thoại — cách tiếp cận được Utopia phổ biến hóa. Thang khoảng cách nhân cùng một cơ sở (0.25×, 0.5×, 1×, 1.5×, 2×…) để padding và khoảng cách tăng cùng với chữ.

Cách dùng clamp() trong Webflow

• Trực tiếp trong bảng Style: Webflow chấp nhận hàm toán học CSS trong các ô kích thước. Nhấp vào Font size, Padding hoặc Gap, dán giá trị clamp(…) rồi nhấn Enter.
• Dưới dạng biến: tạo biến Size cho từng bước (ví dụ “Step 0”, “Space M”) trong bảng Variables, dán giá trị clamp(), rồi áp dụng biến cho font và gap ở các class — chỉnh một lần, cập nhật ở mọi nơi.
• Qua custom code: dán khối :root { … } đã tạo vào bên trong thẻ <style> tại Site settings → Custom code → Head code, rồi nhập var(--step-0) vào bất kỳ ô kích thước nào.
• Khoảng cách linh hoạt như clamp(2rem, …, 4rem) giúp các section không bị quá khổ trên máy tính bảng — hãy dùng nút nhanh Gap.

Cần chuyển thông số thiết kế trước? Công cụ chuyển PX sang REM sẽ đổi giá trị pixel sang rem.

Cũng được tìm dưới tên: máy tính clamp, tính clamp css, font size linh hoạt, máy tính responsive, css clamp, fluid typography, thang chữ linh hoạt, vw rem.

Các công cụ dùng kèm tốt với Máy tính CSS clamp()

• Tạo Type Scale — Chọn cỡ chữ gốc và một tỷ lệ như Minor Third, Major Third, Perfect Fourth hay Golden Ratio, bạn sẽ có bộ cỡ chữ hài hòa cho tiêu đề và nội dung.
• Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.
• Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
• Chuyển đổi đơn vị — Chuyển đổi giữa đơn vị hệ mét, đơn vị Anh-Mỹ và đơn vị kỹ thuật trong mười nhóm — có bộ chuyển đổi hai chiều và bảng tất cả đơn vị cùng lúc.