Công cụ tính CSS clamp()

Bạn cung cấp hai điểm mốc: một kích thước ở chiều rộng màn hình nhỏ và một kích thước ở chiều rộng màn hình lớn. Công cụ sẽ vẽ một đường thẳng nối giữa hai điểm này để kích thước tăng trưởng mượt mà khi màn hình rộng ra, sau đó bọc nó trong hàm clamp() để nó không bao giờ giảm xuống dưới kích thước màn hình nhỏ hoặc vượt quá kích thước màn hình lớn của bạn. Giữa hai chiều rộng này, kích thước sẽ co giãn linh hoạt; ngoài khoảng đó, nó sẽ giữ nguyên ở giới hạn gần nhất.

Các giới hạn biên được tính bằng rem và phần thay đổi ở giữa giữ lại một thành phần rem, nhờ đó văn bản vẫn phóng to khi người đọc thu phóng trang hoặc tăng kích thước phông chữ mặc định của trình duyệt — điều mà các giá trị chỉ dùng pixel hoặc viewport có thể ngăn cản. Bạn nhập kích thước bằng pixel vì đó là cách hầu hết mọi người thường nghĩ về chúng, và công cụ sẽ chuyển đổi sang rem dựa trên kích thước phông chữ gốc (root) của bạn.

Có. Cùng một giá trị này có thể hoạt động tốt cho padding, margin, gap, width hoặc height — bất kỳ nơi nào cần khai báo kích thước chiều dài. Hãy chuyển chế độ xem trước sang "Hộp" (Box) để quan sát khoảng cách co giãn thay vì văn bản. Nếu kích thước nhỏ nhất và lớn nhất của bạn bằng nhau, kết quả sẽ thu gọn về một chiều dài cố định thông thường vì không có gì để co giãn.

Có — mọi trình duyệt hiện đại đều đã hỗ trợ clamp() từ năm 2020, vì vậy bạn có thể sử dụng trực tiếp giá trị này mà không cần phương án dự phòng (fallback). Đối với giá trị tối đa rất lớn hoặc tốc độ thay đổi nhanh, bạn nên kiểm tra nhanh ở mức thu phóng 200% để đảm bảo văn bản vẫn phóng to bình thường cho những độc giả cần đến.