Tạo cỡ chữ fluid

Nhập cỡ chữ ở màn nhỏ và màn lớn, chọn tỉ lệ thang, xem trước rồi chép biến CSS clamp() cho cả bộ tiêu đề và chữ thường.

Cách dùng

Nhập độ rộng màn nhỏ nhất và lớn nhất mà web cần đẹp.
Nhập cỡ gốc ở hai đầu và chọn tỉ lệ thang. Kéo thanh "Xem ở màn rộng" để thấy cỡ thay đổi.
Chép mã biến CSS, dùng như font-size: var(--step-2) hoặc padding: var(--space-m).

Fluid khác gì so với đặt cỡ theo từng màn (media query)?

Media query đổi cỡ theo bậc, nhảy cái một. Fluid dùng clamp() nên cỡ chữ và khoảng cách đổi mượt theo từng điểm ảnh, ít mã hơn.

clamp() có chạy trên mọi trình duyệt không?

Có, mọi trình duyệt phổ biến từ năm 2020 trở lại đây đều hỗ trợ.

Người dùng phóng to chữ thì sao?

Vẫn có tác dụng. Mã dùng rem cộng vw nên cài đặt cỡ chữ của trình duyệt vẫn được tôn trọng.