Tạo hàm clamp() để co giãn văn bản mượt mà từ màn hình nhỏ đến màn hình lớn.
clamp(min, preferred, max) sử dụng giá trị ưu tiên nhưng không bao giờ để giá trị vượt ra ngoài phạm vi min–max. Với giá trị ưu tiên dạng rem + vw, văn bản sẽ tăng tuyến tính theo chiều rộng viewport và dừng lại ở hai đầu giới hạn. Một dòng mã thay thế hàng loạt media query.
Một đường thẳng đi qua (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). Độ dốc = (kích thước tối đa − kích thước tối thiểu) ÷ (viewport tối đa − viewport tối thiểu). Độ dốc × 100 là hệ số vw; điểm cắt trục y là phần cố định.
rem sẽ tự co giãn khi người dùng tăng kích thước phông chữ gốc của trình duyệt. Cố định bằng px sẽ bỏ qua cài đặt đó — ảnh hưởng đến khả năng tiếp cận. Hãy dùng rem trừ khi bạn có lý do cụ thể khác.
Chỉ dùng riêng vw sẽ khiến chữ quá nhỏ trên màn hình hẹp và quá lớn trên màn hình rộng. clamp khóa chặt hai đầu giới hạn này.
Có — cùng một công thức toán học có thể áp dụng cho padding, gap và margin.
Tất cả các trình duyệt phổ biến từ năm 2020. Không hỗ trợ IE, vốn không còn được nhắm tới.
Bạn chỉ cần nhập kích thước phông chữ tối thiểu và tối đa cùng với chiều rộng viewport tối thiểu và tối đa tương ứng.
Có, nút sao chép riêng biệt cho phép bạn sao chép ngay quy tắc CSS clamp() vừa tạo.
Công thức được tạo kết hợp các đơn vị rem và vw để tạo sự co giãn mượt mà giữa các giới hạn min và max do bạn xác định.
Không, bộ tính CSS clamp hoàn toàn miễn phí và có thể dùng trực tiếp trong trình duyệt của bạn mà không cần đăng ký.