Css ngắn nhất để responsive cho font size

https://medium.com/@hmwrk/responsive-font-sizes-how-to-get-em-short-and-sweet-e3df7e71e9d4

Shortest CSS for responsive font size, ever.

CSS mediaqueries sẽ điều chỉnh kích thước font của bạn, nhưng nếu bạn muốn tăng giảm mượt mà giữa hai kích thước khung nhìn thì làm như nào?

Responsive font size là nỗi đau của mọi website. Nó bắt đầu với tiền đề rằng, trên mobile font size nên nhỏ hơn trên máy tính để bàn có kích thước lớn hơn. Nếu bạn thích làm việc với font size như tôi làm với padding và margin, thì bạn sẽ khá thích thú, khá nhanh, điều chỉnh mọi thứ khi bạn thay đổi kích thước, và đừng bắt tôi phải bắt đầu với zoom levels.

Vây, hãy sửa chữa điều này.(trong chỉ một vài dòng)

Cài đặt

Chúng tôi cần chọn một element cha, cái mà có thể điều khiển font size cho mọi element.

Bạn có thể sử dụng HTML hoặc :root nếu bạn muốn, nhưng tôi luôn thích để thẻ đó cho những việc khác. I sử dụng thẻ body.

Xác định các giá trị sau: font size nhỏ nhất cho các màn hình nhỏ, font size lớn nhất cho các màn hình lớn, kích thước khung nhìn (viewport size) nhỏ nhất, kích thước khung nhìn lớn nhất. Có tất cả bốn biến chúng ta cần.

Tôi sử dụng font 18px cho màn hình nhỏ hơn 576px, 21px cho màn hình lớn hơn 1280px. Các kích thước ở giữa 576px và 1280px nên tăng giảm mượt mà giữa 18px và 21px.

Sử dụng em, không phải px

Mọi thứ tôi sử dụng cho thẻ body đang được sử dụng với đơn vị em, đơn vị em được tính toán dựa trên giá trị của thuộc tính font-size, cái này sẽ kế thừa từ global element: phần đệm trên một phần tử trên màn hình có kích thước nhỏ hơn 576px không phải là 18px mà là 1em. Bạn có thể sử dụng CSS function calc() cho mọi thứ với công thức nhỏ hơn, nhưng tôi khuyên bạn rằng chỉ nên nhìn vào một giá trị em theo ý muốn của bạn, điều này sẽ cứu bạn khỏi nỗi thất vọng về các chú thích và sẽ giảm được css code của bạn .

Zoom levels

Khi bạn dựng CSS sử dụng em cho mọi việc với zoom levels. Font size sẽ tăng, và mặc định kích thước các thành phần khác sẽ tăng theo.

Cùng mở rộng thêm

Bây giờ mọi thứ đã được cài đặt và tất cả style của các element trong thẻ global đã được sử dụng với đơn vị em, bây giờ là thời điểm để sử dụng công thức ma thuật:

body {

/* No px! */

--font-size-min: 18;

--font-size-max: 21;

--font-view-min: 576;

--font-view-max: 1280;

/* The magic part */

font-size: clamp(calc(var(--font-size-min) * 1px), calc((var(--font-size-min) * 1px) + (var(--font-size-max) - var(--font-size-min)) * ((100vw - (var(--font-view-min) * 1px)) / var(--font-view-max))), calc(var(--font-size-max) * 1px) );

line-height: 1.6em;

}

Tôi đang sử dụng phương thức clamp(), cái này đã được hầu hết các trình duyệt hỗ trợ (Ngoại trừ IE, nhưng ai mà quan tâm vì bây giờ đang là năm 2023). Về cơ bản nó thực hiện công việc khó khăn nhất cho chúng ta: bạn xác định giá trị nhỏ nhất, công thức tính toán và giá trị lớn nhất.

Đúng rồi, chính là nó.

Tôi đã hứa một giải pháp ngắn gọn và hấp dẫn. Trên website của tôi bạn có thể kiểm tra công thức đang làm việc - https://hmwrk.nl/ 

Bạn có thể kiểm tra bằng cách truy cập vào CodePen của tôi, nhưng để chắc chắn hãy mở nó ở một màn hình riêng.