Tạo CSS clamp() miễn phí

Cách hoạt động

Công cụ này tính giá trị CSS clamp() bằng công thức nội suy tuyến tính tự viết — không thư viện, không gọi máy chủ. Bạn nhập hai kích thước và hai chiều rộng viewport; phép tính chạy ngay trong trình duyệt và tạo biểu thức clamp() sẵn sàng để dán với giá trị ưu tiên dựa trên vw, giúp cỡ chữ hoặc khoảng cách co giãn mượt giữa các điểm ngắt đó.

1. 1
   Tính độ dốc tuyến tính

   Công cụ tính độ dốc pixel trên pixel: (maxSize - minSize) / (maxViewport - minViewport). Độ dốc này sau đó được chuyển sang đơn vị vw bằng cách nhân với 100, đây là cốt lõi của cách co giãn theo viewport trong CSS.
2. 2
   Suy ra hệ số chặn

   Một độ lệch chặn (theo px hoặc rem) được tính để hàm tuyến tính đạt đúng kích thước tối thiểu tại viewport tối thiểu. Cùng nhau, độ dốc và hệ số chặn tạo thành giá trị ưu tiên bên trong clamp() — phần thực sự co giãn.
3. 3
   Chuyển đổi đơn vị và định dạng đầu ra

   Nếu bạn chọn đầu ra rem, mọi giá trị pixel được chia cho cỡ chữ gốc đã cấu hình (mặc định 16px) trước khi ghi vào chuỗi clamp(). Một lớp giá trị tùy ý tương ứng của Tailwind cũng được tạo, với dấu cách được thay bằng dấu gạch dưới theo cú pháp của Tailwind.
4. 4
   Xem trước với thanh trượt viewport trực tiếp

   Một thanh trượt cho phép bạn kéo từ chiều rộng 320px đến 1920px. Ở mỗi vị trí, cùng công thức độ dốc và hệ số chặn tính kích thước đã kẹp theo thời gian thực và hiển thị văn bản mẫu ở đúng cỡ pixel đó, để bạn thấy cách co giãn trước khi sao chép.

Công cụ liên quan