Responsive fontsize text trong html5 một cách dễ dàng (How to responsive fontsize text in html5)

Trước tiên, ta phải tìm hiểu sơ qua một số đơn vị trong html5. Ngoài đơn vị pixel ra thì có một số đơn vị hay sử dụng:

Đơn vị : em

 Ví dụ có element div1 chứa div2, div1 có font-size:14px thì div2 bạn dặt font-size là 1.2em thì nó sẽ được tính ra giá trị là 14 * 1.2em = 16.8px do kế thừa từ thằng cha gần nhất của nó. Cứ thế nếu có div3 nằm trong div2 thì nó sẽ được tính 16.8 * 1.2em = 20.8px

Đơn vị : rem

 Ví dụ có element div1 chứa div2, div1 có font-size:14px thì div2 bạn dặt font-size là 1.2rem thì nó ko kế thừa từ thằng cha gần nhất của nó mà lấy giá trị của tag html root . Nếu tag html có font-size là 16px thì div2 sẽ được tính ra giá trị 16 *1.2rem . Nếu có div3  chứa trong div2 thì nó cũng chỉ nhận giá trị 16 *1.2rem 

=>Nếu xài đơn vị em thì nó lấy kế thừa thằng cha gần nhất của nó
=>Nếu sử dụng đơn vị rem thì nó lấy giá trị của html tag root

Đơn vị : vw

1 vw = 1% chiều ngang của trình duyệt.

Đơn vị : vh

1 vh = 1% chiều cao của trình duyệt.

Bây giờ bắt đầu responsive fontsize text, ta sử dụng đơn vị vw

Bạn chỉ cần áp dụng công thức sau đây

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

Ví dụ :

font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1200 - 300)));

Ở ví dụ trên ta có thể xác định được vị trí breakpoint 1200px thì front-size sẽ bằng 26px, và khi resize màn hình lớn hơn 1200px thì font-size sẽ tăng lên, hoặc nhỏ hơn thì font-size sẽ giảm xuống theo tỉ lệ đã được tính trong hàm calc ở trên.

Sau đây là demo chi tiết

Ta có nội dung trang web như sau

File style.css

Chạy trên trình duyệt

Bây giờ responsive như sau

Nếu ở màn hình nhỏ hơn 640px thì body sẽ lấy giá trị từ 14px tới 26px, class box sẽ lấy giá trị từ 16px đến 26px. Tuỳ ý ta resize như thế nào thì text sẽ tự co giãn cho phù hợp

Kết quả trình duyệt

Thử resize nhỏ lại xíu thì font size của class box sẽ giảm xuống như hình

Xem demo tại đây
Link tham khảo thêm:
https://viblo.asia/p/7-don-vi-css-co-the-ban-khong-biet-E375zyj6lGW
https://viblo.asia/p/responsive-and-fluid-typography-4P8563raKY3
https://css-tricks.com/snippets/css/fluid-typography/

Chúc bạn thành công :)