Trình tạo CSS clamp()

Trình tạo CSS clamp() là gì?

Trình tạo CSS clamp() là một công cụ tính typography linh hoạt miễn phí dành cho nhà phát triển front-end và nhà thiết kế. Bạn cung cấp cho nó cỡ chữ tối thiểu, cỡ chữ tối đa, chiều rộng khung nhìn tối thiểu và chiều rộng khung nhìn tối đa; nó trả về một khai báo clamp(min, ưu tiên, max) trong đó giá trị ưu tiên kết hợp một độ lệch rem với một độ dốc vw, để văn bản tăng tuyến tính theo màn hình và không bao giờ vượt khỏi giới hạn của bạn. Điều này loại bỏ nhu cầu xếp chồng các media query font-size và giữ tiêu đề cũng như nội dung văn bản phản hồi trên mọi thiết bị. Chọn một cỡ xem trước để thấy cách giá trị được hiển thị, chuyển đổi đơn vị đầu ra giữa rem và px, rồi sao chép dòng đó thẳng vào tệp định kiểu của bạn.

Cách sử dụng Trình tạo CSS clamp()

1. Nhập cỡ chữ tối thiểu — cỡ mà văn bản cần có trên màn hình nhỏ nhất.
2. Nhập cỡ chữ tối đa — cỡ mà văn bản cần đạt tới trên màn hình lớn nhất.
3. Đặt chiều rộng khung nhìn tối thiểu và tối đa mà cỡ chữ cần co giãn giữa chúng.
4. Mở cài đặt để chuyển đổi đơn vị đầu ra (rem giữ tính tiếp cận; px cũng có sẵn) nếu bạn muốn.
5. Chọn một cỡ xem trước để hiển thị văn bản mẫu tại khung nhìn đó, rồi đọc giá trị clamp() trực tiếp.
6. Sao chép biểu thức clamp() đã tạo và dán vào font-size CSS của bạn.

Ví dụ

font min 16, font max 20, vw min 320, vw max 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

font min 32, font max 64, vw min 320, vw max 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

font min 12, font max 14, vw min 480, vw max 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Câu hỏi thường gặp

Giá trị clamp() co giãn như thế nào mà không cần media query?

clamp(min, ưu tiên, max) nhận một cận dưới, một giá trị ưu tiên (linh hoạt) và một cận trên. Giá trị ưu tiên là một đường thẳng dạng rem + vw, được tính sao cho cỡ chữ bằng giá trị tối thiểu của bạn tại khung nhìn tối thiểu và bằng giá trị tối đa của bạn tại khung nhìn tối đa. Giữa các chiều rộng đó, trình duyệt nội suy tự động, và ngoài chúng clamp() ghim cỡ chữ vào giới hạn gần nhất — tất cả trong một khai báo duy nhất.

Tại sao đầu ra ở dạng rem thay vì px?

Dùng rem cho các phần cố định tôn trọng cài đặt cỡ chữ trong trình duyệt của người dùng, điều này tốt hơn cho khả năng tiếp cận. Độ dốc tương đối với khung nhìn được biểu diễn bằng vw. Bạn có thể chuyển đơn vị sang px trong cài đặt nếu dự án của bạn cần đơn vị tuyệt đối, nhưng rem là giá trị mặc định được khuyến nghị.

Tôi nên dùng phạm vi khung nhìn nào?

Một lựa chọn phổ biến là chiều rộng nhỏ nhất bạn hỗ trợ (thường là 320px hoặc 360px) cho giá trị tối thiểu và vùng chứa nội dung rộng nhất của bạn (như 1240px–1536px) cho giá trị tối đa. Cỡ chữ chỉ hoàn toàn linh hoạt bên trong phạm vi đó; bên dưới nó văn bản giữ ở mức tối thiểu và bên trên ở mức tối đa.

Điều này có hoạt động với bất kỳ độ dài CSS nào, không chỉ font-size không?

Có. Giá trị clamp() được tạo chỉ là một độ dài, nên bạn có thể dán nó vào padding, margin, gap hoặc bất kỳ thuộc tính nào chấp nhận độ dài. Các nhãn nhắc đến font-size vì typography linh hoạt là cách dùng phổ biến nhất, nhưng phép toán là giống hệt đối với khoảng cách.

Dữ liệu của tôi có được gửi đi đâu không?

Không. Phép tính chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript — cỡ chữ và chiều rộng khung nhìn của bạn không bao giờ được tải lên bất kỳ máy chủ nào, nên công cụ hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang đã tải.