CSS Clamp

Giới thiệu về máy tính này

Máy tính CSS clamp tạo biểu thức co giãn clamp(min, preferred, max) giúp một giá trị thay đổi tuyến tính giữa hai độ rộng viewport. Nhập giá trị tối thiểu và tối đa (rem hoặc px) cùng khoảng viewport, công cụ sẽ suy ra hệ số góc theo vw và tung độ gốc của đường thẳng đi qua cả hai điểm, kèm các giá trị tính được tại mỗi điểm ngắt để đối chiếu. Cỡ chữ gốc được giả định là 16px khi dùng rem. Khoảng bị đảo ngược sẽ trả về lỗi kiểm tra. Lý tưởng cho kiểu chữ và khoảng cách co giãn.

Cách sử dụng CSS Clamp

1. Nhập hoặc dán dữ liệu vào ô nhập liệu.
2. Xem kết quả — kết quả cập nhật ngay khi bạn gõ.
3. Điều chỉnh các tùy chọn (nếu có) cho phù hợp với nhu cầu của bạn.
4. Sao chép URL của trang để chia sẻ đúng kết quả này.

Ví dụ thường gặp

• 1rem ở 320px → 2rem ở 1280px → clamp(1rem, 1.6667vw + 0.6667rem, 2rem)
• 1.25rem ở 375px → 3rem ở 1440px → clamp(1.25rem, 2.6291vw + 0.6338rem, 3rem)
• 16px ở 320px → 32px ở 1200px → clamp(16px, 1.8182vw + 10.1818px, 32px)