Công Cụ Tính CSS Clamp()

CSS clamp(MIN, PREFERRED, MAX) cho phép một khai báo thay thế cả một loạt media query: giá trị giữ ở MIN bên dưới khung nhìn nhỏ nhất, ở MAX bên trên khung nhìn lớn nhất, và co giãn mượt mà ở giữa. Phần khó là biểu thức PREFERRED — một biểu thức tương đối với khung nhìn như 0.833rem + 0.833vw — mà không ai muốn tự tính tay. Công cụ này tính toán thực sự từ bốn con số: kích thước tối thiểu, kích thước tối đa, và chiều rộng khung nhìn tại đó mỗi giá trị áp dụng.

Mọi con số trung gian đều được hiển thị, không chỉ dòng cuối cùng: độ dốc (đơn vị kích thước tăng thêm bao nhiêu trên mỗi pixel khung nhìn), cùng độ dốc đó biểu diễn dưới dạng hệ số vw, và giao điểm trục Y — hằng số thêm vào số hạng vw để đường thẳng đi qua chính xác hai điểm bạn đã chỉ định. Bất kỳ ai từng dán giá trị clamp() từ một hướng dẫn mà không hiểu rõ đều có thể thấy và kiểm tra phép toán thực tế tại đây.

Một thanh trượt chiều rộng khung nhìn điều khiển một khung xem trước trực tiếp, để hiệu ứng co giãn linh hoạt có thể nhìn thấy được, không chỉ là tính toán: kéo nó giữa các điểm ngắt tối thiểu và tối đa và xem văn bản mẫu co giãn chính xác như khi thay đổi kích thước cửa sổ trình duyệt thực. Dòng kết quả và phần phân tích cập nhật theo từng thao tác gõ phím – điều này kết hợp tự nhiên với công cụ chuyển đổi px sang rem khi bản thân cỡ chữ cơ sở cũng cần chuyển đổi.

Chuyển sang chế độ thang tỷ lệ để có một hệ thống typography linh hoạt hoàn chỉnh trong một bước: nhập kích thước cơ sở và tỷ lệ module (1.125 đến 1.5) và nhận sáu kích thước – small, base, h4, h3, h2 và h1 – mỗi kích thước được tính là một dòng clamp() riêng giữa tiến trình di động nhẹ nhàng hơn và tỷ lệ máy tính để bàn đầy đủ, sẵn sàng sao chép dưới dạng một khối thuộc tính tùy chỉnh CSS.