Công thức cho cỡ chữ responsive

 (jameshfisher.com)
28 điểm bởi xguru 2024-03-22 | 3 bình luận | Chia sẻ qua WhatsApp
  • Nhiều website như New York Times, Medium, Substack đặt breakpoint (như 768px) và thay đổi cỡ chữ theo mốc đó (1.125 rem và 1.25rem)
  • Có thể dùng calc của CSS để viết ra các giá trị tương tự: calc(1.0625rem + 0.2604vw)
  • Nếu làm tròn lại thì có thể biểu diễn thành 1rem + 0.25vw. Vì vậy giờ tôi dùng CSS dưới đây cho hầu hết các website
:root {  
  font-size: calc(1rem + 0.25vw);  
}

Bài viết liên quan

3 bình luận

 
yanggitak 2024-03-25

Để tái hiện giống hệt bản thiết kế trên PC, có lẽ cũng nên đưa cả biến CSS dùng để loại trừ chiều rộng thanh cuộn vào công thức. Theo tôi biết thì đơn vị vw lấy chiều rộng làm tiêu chuẩn bao gồm cả chiều rộng thanh cuộn.

Trong trường hợp cần tăng giảm theo cùng một tỷ lệ cả phần khoảng trắng của các yếu tố xung quanh như ảnh tràn khung, thì cách thiết lập phông chữ ở trang bên dưới cũng đáng để tham khảo. Với Galaxy Fold (320px) hoặc màn hình độ phân giải cao, có vẻ cũng ổn nếu đặt giới hạn phù hợp bằng breakpoint.
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/
 
cometkim 2024-03-22

Đây là một phép xấp xỉ hữu ích, nhưng khó có thể thay thế hoàn toàn các breakpoint thực tế dùng trong Fluid Typography.

Thông thường clamp(min_rem, calc_relative_vw, max_rem) được áp dụng khác nhau theo từng breakpoint, tùy vào khả năng đọc của nội dung và hình dạng của container; nếu cố xử lý bằng một công thức duy nhất thì sẽ khó hỗ trợ các form factor không phổ biến.

Ví dụ như cửa sổ popup trên Android, màn hình 21:9, hay các môi trường như HMD.
 
nemorize 2024-03-23

Mình không rõ lắm về những thứ như popup Android hay HMD..
Nhưng với mấy tỷ lệ như 21:9 thì nếu kết hợp cả vh vào dùng cũng ổn chứ nhỉ?
Kiểu như calc(1rem + min(1vw, 1vh) * 0.25) ấy.