Máy Tính CSS clamp()

Fluid typography làm cho chữ co giãn mượt mà theo mọi cỡ màn hình thay vì nhảy giật giữa các điểm ngắt cố định. Dùng CSS clamp(), font-size điều chỉnh theo tỷ lệ khi bề ngang viewport thay đổi — không cần media query.

clamp(min, preferred, max) giới hạn một giá trị giữa mức tối thiểu và tối đa. Giá trị preferred dùng đơn vị vw nên lớn dần theo viewport, nhưng không bao giờ tụt dưới min hay vượt quá max. Ví dụ, font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem) co giãn chữ từ 16px ở viewport 320px lên 24px ở 1440px.

Giá trị preferred (ở giữa) là một hàm tuyến tính của bề ngang viewport. Bạn tính độ dốc từ chênh lệch cỡ chữ và chênh lệch viewport, đổi nó thành hệ số vw, rồi tìm ra hệ số tự do theo rem/px. Máy tính này làm tất cả các bước đó tự động và hiển thị quá trình trong bảng Công thức.

Hầu hết trường hợp nên dùng rem — rem tôn trọng thiết lập cỡ chữ trình duyệt của người dùng, giúp tăng khả năng truy cập. Chỉ chọn px khi bạn cần một cỡ chữ độc lập với root font-size. Khi xuất rem, hãy đặt Cỡ chữ gốc bằng root font-size của dự án để phép đổi chính xác.

Phạm vi 320px đến 1440px phù hợp với hầu hết dự án: 320px bao quát những điện thoại nhỏ phổ biến nhất, còn 1440px là bề ngang máy tính tiêu chuẩn. Hãy điều chỉnh các mốc để khớp với số liệu phân tích hoặc bản thiết kế của riêng bạn.

Khi chiều cao dòng min và max giống nhau, không có gì để co giãn, nên máy tính xuất một giá trị tĩnh thay vì một clamp() không cần thiết. Hãy đặt chiều cao dòng min và max khác nhau nếu bạn muốn nó co giãn mượt mà.

Có. CSS clamp() được hỗ trợ trên mọi trình duyệt hiện đại, gồm Chrome 79+, Firefox 75+, Safari 13.1+ và Edge 79+. Với trình duyệt rất cũ, hãy thêm một font-size dự phòng đơn giản trước khai báo clamp().

Media query đổi cỡ chữ theo từng bước đột ngột ở mỗi điểm ngắt và cần một giá trị riêng cho từng phần tử và từng cỡ màn hình. Một clamp() duy nhất co giãn liên tục giữa hai viewport, nên chữ luôn nhìn cân đối và ít CSS phải bảo trì hơn nhiều.