Trong thiết kế website, việc trình bày văn bản rõ ràng và hấp dẫn trên mọi thiết bị là rất quan trọng. Tuy nhiên, việc sử dụng media queries để điều chỉnh kích thước phông chữ cho từng loại màn hình có thể gây tốn nhiều thời gian và công sức. Vậy làm thế nào để tạo kiểu chữ linh hoạt, tự động co giãn theo kích thước màn hình mà không cần quá nhiều mã? Câu trả lời chính là sử dụng hàm clamp() trong CSS.
Những Vấn Đề Thường Gặp Với Kích Thước Phông Chữ
Khi thiết kế một trang web, chẳng hạn như với các thẻ <h1> và <p>, bạn có thể thấy rằng kích thước văn bản phù hợp trên máy tính nhưng lại trở nên quá lớn hoặc quá nhỏ trên điện thoại. Ví dụ, mã HTML cơ bản sau cho thấy việc sử dụng phông chữ cố định:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fluid Typography</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #333;
color: white;
text-align: center;
}
h1 {
font-size: 5rem;
}
p {
font-size: 3rem;
color: red;
}
</style>
<body>
<h1>CSS Fluid Typography</h1>
<p>Why is this text not scalable</p>
</body>
</html>Giải Pháp Truyền Thống: Media Queries
Thông thường, một giải pháp là sử dụng media queries để điều chỉnh kích thước phông chữ tùy thuộc vào độ rộng khung nhìn. Tuy nhiên, phương pháp này có thể phức tạp khi cần xử lý nhiều kích thước màn hình khác nhau.
Đơn Vị vw: Giải Pháp Linh Hoạt
Một cách khác là sử dụng đơn vị vw (viewport width) trong CSS. Đơn vị này cho phép bạn thiết lập kích thước phông chữ tương đối với độ rộng của thiết bị, từ đó cải thiện khả năng phản ứng của văn bản trên nhiều loại màn hình:
css
<style>
h1 {
font-size: 10vw; /* H1 có kích thước 10% độ rộng khung nhìn */
}
p {
font-size: 5vw; /* p có kích thước 5% độ rộng khung nhìn */
color: red;
}
</style>Khi sử dụng vw, kích thước phông chữ sẽ là 10% độ rộng màn hình. Tuy nhiên, nếu chỉ dùng vw, kích thước phông chữ có thể tăng hoặc giảm quá mức khi kích thước màn hình thay đổi.
Hàm clamp(): Kiểm Soát Kích Thước Phông Chữ
Đó là lúc hàm clamp() trở nên hữu ích. Hàm này cho phép bạn đặt giới hạn tối thiểu, kích thước mong muốn, và giới hạn tối đa cho kích thước phông, giúp bạn kiểm soát việc tự điều chỉnh của văn bản trong một phạm vi nhất định.
Cú pháp của hàm clamp() rất đơn giản:
css
clamp(minimum, preferred, maximum)- Minimum: Kích thước nhỏ nhất của văn bản.
- Preferred: Kích thước lý tưởng, thường là tỷ lệ phần trăm của độ rộng khung nhìn.
- Maximum: Kích thước lớn nhất của văn bản.
Ví Dụ Minh Họa Cụ Thể
Bạn có thể áp dụng clamp() cho thẻ <h1> như sau:
css
h1 {
font-size: clamp(24px, 5vw, 48px);
}Với đoạn mã trên, kích thước phông chữ sẽ nằm trong khoảng từ 24px đến 48px. Khi thay đổi độ rộng khung nhìn, kích thước phông chữ sẽ tự động điều chỉnh theo giá trị 5vw nhưng không nhỏ hơn 24px và cũng không lớn hơn 48px.
Kết Luận
Sự kết hợp giữa vw và clamp() sẽ giúp bạn dễ dàng tạo ra kiểu chữ linh hoạt, tự động điều chỉnh theo kích thước màn hình mà không cần viết quá nhiều mã CSS. Điều này không chỉ giúp tiết kiệm thời gian mà còn nâng cao trải nghiệm người dùng trên website của bạn.
Cảm ơn các bạn đã quan tâm theo dõi!
source: viblo
