Cách tạo kiểu chữ đáp ứng bằng CSS
Việc phát triển một trang web có quá nhiều điểm ngắt có thể rất mệt mỏi. Có nhiều kỹ thuật mới để học trong CSS, cho dù bạn là nhà phát triển dày dạn kinh nghiệm hay nhà phát triển cấp trung.
Nhưng làm thế nào để bạn bắt đầu với kiểu chữ đáp ứng? Dưới đây là cách thực hiện các bước để điều chỉnh các trang web với bất kỳ kích thước màn hình nào.
Mục Lục
Tầm quan trọng của Responsive Typography
Kiểu chữ đóng một vai trò quan trọng trong việc phát triển và thiết kế web bằng cách đảm bảo khả năng đọc, khả năng sử dụng và tính thẩm mỹ tổng thể của một trang web. Mọi người đều muốn có một trang web đáp ứng. Sẽ thật tuyệt nếu văn bản hoặc phông chữ tự động điều chỉnh theo các kích thước màn hình khác nhau phải không? Các ưu điểm khác của kiểu chữ đáp ứng trong phát triển web bao gồm những điều sau đây;
- Nó cải thiện trải nghiệm tổng thể của người dùng trên các thiết bị hoặc kích thước màn hình khác nhau bằng cách đảm bảo tính dễ đọc và dễ đọc.
- Nó tăng khả năng truy cập bằng cách hỗ trợ người dùng bị khiếm thị hoặc các khuyết tật khác. Nó chứa các tùy chọn người dùng khác nhau, chẳng hạn như kích thước phông chữ có thể điều chỉnh.
- Kiểu chữ nhất quán trên các thiết bị và độ phân giải giúp duy trì bản sắc thương hiệu và sự thống nhất về mặt hình ảnh.
Đây là mẫu mã mà bạn có thể sao chép vào trình chỉnh sửa mã của mình trước khi bắt đầu, vì vậy bạn có thể làm theo các kỹ thuật sẽ được thảo luận.
Tệp mã HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title> Responsive Typography </title>
</head>
<body>
<div class="container">
<h1> Lorem ipsum </h1>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis!
</p>
</div>
</body>
</html>
Tệp mã CSS
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
width: 400px;
background-color: antiquewhite;
padding: 15px;
box-shadow:0 2px 5px rgba(0,0,0, 0.1) ;
}
h1{
color: hotpink;
}
Bây giờ, hãy khám phá một số phương pháp và kỹ thuật hiệu quả để triển khai kiểu chữ đáp ứng bằng CSS
1. Kẹp
Đây là một kỹ thuật kiểu chữ CSS hiện đại cho phép và đảm bảo kích thước phông chữ của một phần tử nằm trong một phạm vi nhất định. Chức năng kẹp “Kẹp()” nhận ba tham số, giá trị nhỏ nhất, giá trị lý tưởng và giá trị lớn nhất. Chức năng kẹp không giới hạn ở kiểu chữ. Nó có thể được sử dụng cho hình ảnh, thẻ, video và các phương tiện khác. Đây là cách nó hoạt động.
Kẹp (giá trị tối thiểu, giá trị lý tưởng, giá trị tối đa):
h1{
font-size: clamp(2rem, 5vw, 3rem);
}
p{
font-size: clamp(1rem, 3vw, 2rem);
}
Trong ví dụ này, kích thước phông chữ cho tiêu đề và đoạn văn được đặt bằng chức năng “clamp()”. Đối với tiêu đề “h1”, giá trị tối thiểu được đặt thành “2rem” để đảm bảo kích thước phông chữ sẽ không thấp hơn hai lần kích thước phông chữ gốc. Giá trị lý tưởng hoặc ưu tiên được đặt thành “5vw”, chiếm 5% chiều rộng khung nhìn giúp nó phản hồi với các kích thước màn hình khác nhau. Giá trị tối đa được đặt thành “3 rem” để đảm bảo kích thước phông chữ sẽ không lớn hơn ba lần kích thước phông chữ gốc. Ngược lại cho kiểu dáng đoạn văn.
Cách tốt nhất là sử dụng chiều rộng khung nhìn “vw” hoặc tỷ lệ phần trăm “%” cho giá trị lý tưởng, vì nó cho phép thuộc tính chia tỷ lệ theo tỷ lệ dựa trên không gian có sẵn, giúp thiết kế phản hồi nhanh hơn. Đảm bảo rằng bạn biết nên sử dụng đơn vị CSS nào cho kịch bản của mình.
Đây là kỹ thuật typography phổ biến nhất được sử dụng bởi các nhà phát triển. Nó liên quan đến việc tạo các truy vấn phương tiện cho từng điểm ngắt. Nó cho phép bạn áp dụng các kiểu cụ thể dựa trên các kích thước màn hình khác nhau. Đây là một minh họa:
h1{
font-size: 38px;
}
p{
font-size: 20px;
}
@media (max-width:800px){
h1{
font-size: 32px;
}
p{
font-size: 18px;
}
}
@media (max-width:400px){
h1{
font-size: 28px;
}
p{
font-size: 15px;
}
}
Trong ví dụ này, tiêu đề và đoạn văn được đặt thành giá trị mặc định tương ứng là “38px” đến “20px”. Sau đó, các điều kiện được đặt cho kích thước màn hình nhỏ hơn để làm cho bố cục phản hồi nhanh trên điện thoại di động. Bạn có thể tạo bao nhiêu truy vấn phương tiện tùy thích dựa trên thiết kế và khả năng phản hồi mà bạn muốn, trong số rất nhiều thủ thuật CSS truy vấn phương tiện khác mà bạn nên biết.
3. Thuộc tính tùy chỉnh CSS
Còn được gọi là biến tùy chỉnh CSS, nó lưu trữ các giá trị có thể được sử dụng lại trong suốt quá trình tạo kiểu của bạn. Nó có thể được sử dụng cho kiểu chữ để cho phép quản lý và tùy chỉnh dễ dàng. Đây là một ví dụ.
:root {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
font-size: var(--heading-font-size);
}
p{
font-size: var(--paragraph-font-size);
}
@media (max-width:800px){
:root {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@media (max-width:400px){
:root {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}
Trong ví dụ này, thuộc tính CSS được đặt ở cấp gốc, cho phép chúng tôi truy cập nó trên toàn cầu. –heading-font-size và –paragraph-font-size lần lượt là các tên mô tả cho tiêu đề và đoạn văn, với các giá trị mặc định được cung cấp cho cả hai. Kỹ thuật này có thể được sử dụng lại cho các truy vấn phương tiện khác nhau để đảm bảo tính nhất quán trên bảng.
Responsive Typography Thực tiễn tốt nhất
Thông lệ phổ biến giữa các nhà phát triển là sử dụng trực tiếp chiều rộng khung nhìn (vw) để thực hiện kiểu chữ. Mặc dù nó đơn giản và có vẻ hoạt động, nhưng nó trở nên rất nhỏ trên kích thước màn hình nhỏ và cực lớn trên kích thước màn hình lớn. Điều này cũng xảy ra khi bạn phóng to và thu nhỏ trang của mình. Nếu có thể, hãy tránh sử dụng chế độ xem trực tiếp như thế này;
h1{
font-size: 2vh;
}
Luôn kiểm tra và đảm bảo kiểu chữ của bạn có thể đọc được trên các kích thước màn hình khác nhau và luôn kiểm tra khả năng tương thích của trình duyệt. Xem xét khả năng đọc và đảm bảo kích thước phông chữ không quá nhỏ hoặc quá lớn
Kiểu chữ đáp ứng chìa khóa để thiết kế web có thể đọc được
Kiểu chữ đáp ứng đóng một vai trò quan trọng trong thiết kế và phát triển web. Bằng cách triển khai các phương pháp và kỹ thuật như kẹp, truy vấn phương tiện và thuộc tính tùy chỉnh CSS, bạn có thể đảm bảo tỷ lệ kiểu chữ của mình trên nhiều kích thước màn hình và thiết bị khác nhau. Có rất nhiều kỹ thuật để khám phá khi cố gắng tạo khả năng phản hồi bằng CSS–hãy sử dụng những kỹ thuật này để bắt đầu phát triển kiến thức chuyên môn trong lĩnh vực này.