Máy tính CSS Kẹp()

Kẹp CSS(MIN, PREFERRED, MAX) cho phép một khai báo thay thế toàn bộ chồng truy vấn phương tiện: giá trị nằm ở MIN bên dưới khung nhìn nhỏ nhất, ở MAX trên khung nhìn lớn nhất và chia tỷ lệ mượt mà ở giữa. Phần khó khăn là thuật ngữ ƯU ĐÃI — một biểu thức tương đối với khung nhìn, chẳng hạn như 0,833rem + 0,833vw — mà không ai muốn lấy bằng tay. Máy tính này tính toán nó thực tế từ bốn số: kích thước tối thiểu, kích thước tối đa và chiều rộng khung nhìn mà mỗi số được áp dụng.

Mọi số trung gian đều được hiển thị, không chỉ dòng cuối cùng: độ dốc (giá trị tăng lên bao nhiêu đơn vị kích thước trên mỗi pixel của khung nhìn), độ dốc tương tự được biểu thị dưới dạng hệ số vw và giao điểm trục y - hằng số được thêm vào thuật ngữ vw để đường đi qua chính xác hai điểm bạn đã chỉ định. Bất kỳ ai đã dán giá trị kẹp() từ hướng dẫn mà không hiểu nó đều có thể xem và kiểm tra số học thực tế tại đây.

Thanh trượt có chiều rộng khung nhìn điều khiển hộp xem trước trực tiếp, do đó, tỷ lệ linh hoạt có thể nhìn thấy chứ không chỉ được tính toán: kéo nó giữa các điểm dừng tối thiểu và tối đa và xem văn bản mẫu thay đổi kích thước chính xác như khi cửa sổ trình duyệt thực được thay đổi kích thước. Dòng đầu ra và bản cập nhật phân tích trên mỗi lần nhấn phím - điều này kết hợp một cách tự nhiên với trình chuyển đổi px sang rem khi bản thân kích thước phông chữ cơ sở cũng cần chuyển đổi.

Chuyển sang chế độ tỷ lệ loại cho hệ thống kiểu chữ linh hoạt hoàn chỉnh trong một bước: nhập kích thước cơ sở và tỷ lệ mô-đun (1,125 đến 1,5) và nhận sáu kích thước — nhỏ, cơ sở, h4, h3, h2 và h1 — mỗi kích thước được tính dưới dạng đường kẹp() riêng giữa tiến trình di động nhẹ nhàng hơn và tỷ lệ màn hình đầ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.