Con đường dẫn đến văn bản đáp ứng thanh lịch
CSS (Cascading Style Sheets) là một trong những khối xây dựng giao diện người dùng trong các ứng dụng web, thiết bị di động và máy tính để bàn. Ngôn ngữ tạo kiểu này có các giá trị và thuộc tính khác nhau, giúp dễ dàng cung cấp cho các ứng dụng các kiểu và thuộc tính khác nhau. REM là một trong những giá trị bạn sẽ gặp rất nhiều khi tạo kiểu cho các trang web của mình bằng CSS.
Trong bài viết này, tôi sẽ giải thích REM trong CSS, thảo luận về tầm quan trọng của kiểu chữ đáp ứng trong thiết kế web, mô tả cách tính đơn vị REM và đề cập đến một số lợi ích của việc sử dụng REM trong CSS.
Mục lục
REM trong CSS là gì?
Root-EM (REM) là đơn vị biểu thị kích thước phông chữ của phần tử tương ứng với kích thước phông chữ của phần tử gốc. REM là một đơn vị tương đối, nghĩa là tất cả các giá trị sử dụng nó sẽ thay đổi khi kích thước phông chữ của phần tử gốc thay đổi. Kích thước phông chữ mặc định của hầu hết các trình duyệt là 16px. Do đó, nếu phần tử gốc là 16px thì kích thước REM sẽ là 1.
Đơn vị REM trái ngược với đơn vị tuyệt đối như pixel. Lấy ví dụ, mã này:
<div>Hello World</div>
Đây là phong cách của chúng tôi:
div {
border: 1.5px solid black;
width: 200px;
}
Chiều rộng của khối (200px) sẽ giữ nguyên bất kể kích thước màn hình tăng hay nhỏ hơn. Chiều rộng này không liên quan đến bất cứ điều gì trong tài liệu HTML của chúng tôi.
Điều tương tự cũng áp dụng cho đường viền vùng chứa của chúng tôi; nó sẽ vẫn có kích thước 1,5px bất kể biến thể màn hình hoặc môi trường.
Tầm quan trọng của kiểu chữ đáp ứng trong thiết kế web
Kiểu chữ đáp ứng liên quan đến rất nhiều thứ, chẳng hạn như bố cục văn bản, kích thước và khoảng cách. Đây là một số lý do tại sao các nhà thiết kế web triển khai thiết kế web đáp ứng:
- Cải thiện trải nghiệm người dùng: Người dùng web bị thu hút bởi các ứng dụng dễ điều hướng. Một ứng dụng có thể điều chỉnh theo các kích thước màn hình và môi trường khác nhau mang lại trải nghiệm thú vị và liền mạch cho người dùng.
- Giúp dễ dàng điều chỉnh theo các khung nhìn khác nhau: Kiểu chữ đáp ứng kiểm tra không gian có sẵn trên một khung nhìn và điều chỉnh cho phù hợp. Như vậy, bạn sẽ không gặp phải trường hợp văn bản bị kéo giãn quá mức trên màn hình lớn hay văn bản quá nhỏ trên màn hình nhỏ.
- Cải thiện khả năng đọc: Một trang web tốt phải dễ truy cập và đọc. Đầu tư vào kiểu chữ đáp ứng đảm bảo rằng văn bản trên ứng dụng của bạn sẽ điều chỉnh dựa trên kích thước và hướng màn hình.
- Xây dựng thương hiệu nhất quán: Khi mã nguồn của bạn tăng lên, bạn có thể có các biến thể phông chữ hỗn hợp trong ứng dụng của mình. Thiết kế đáp ứng đảm bảo rằng bạn có các phương pháp thiết kế nhất quán bất kể kích thước màn hình hoặc hành vi của người dùng.
- Tích hợp với truy vấn phương tiện: Kiểu chữ đáp ứng có thể được kết hợp với truy vấn phương tiện. Các nhà thiết kế web có thể thiết kế các phong cách khác nhau thông qua truy vấn phương tiện trong đó phông chữ điều chỉnh dựa trên các đặc điểm như hướng và kích thước màn hình.
- Khả năng truy cập được cải thiện: Kiểu chữ đáp ứng là một trong những nền tảng cho khả năng truy cập của ứng dụng. Do đó, người dùng với nhiều khả năng khác nhau có thể điều chỉnh kích thước màn hình và phông chữ cho phù hợp với nhu cầu của mình.
Cách tính đơn vị REM
Đơn vị REM được tính liên quan đến kích thước phông chữ của phần tử (gốc). Tính năng này cho phép chúng tôi tạo các thiết kế nhất quán và có thể mở rộng bằng cách đặt các giá trị dựa trên một giá trị gốc duy nhất.
Hầu hết các trình duyệt theo mặc định được đặt thành 16px. Tuy nhiên, bạn có thể đặt kích thước phông chữ của giá trị gốc thành một con số như 10px. Bạn có thể có một cái gì đó như thế này:
html {
font-size: 10px;
}
Trong trường hợp như vậy, 10px=1 REM
Chúng ta có thể sử dụng mã này để chứng minh:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Welcome to techpoe.com</h1> </body> </html>
Mã này không có kiểu dáng và có một thành phần duy nhất, H1, có nội dung “Chào mừng đến với techpoe.com”.
Kích thước phông chữ theo mặc định sẽ là 16px, nghĩa là 1REM=16px. Khi chúng tôi kết xuất trang này, đây là những gì chúng tôi nhận được:
Bây giờ chúng ta có thể thêm bảng định kiểu, styles.css và trình bày cách hoạt động của REM. Đây là cách bạn liên kết các tệp styles.css và index.html trên phần
của tài liệu HTML của bạn:<link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">
Sau đó bạn có thể có mã này:
html {
font-size: 10px;
}
Trong trường hợp này, khi chúng ta xác định các số liệu REM, chúng sẽ tương ứng với 10px. Kích thước phông chữ của H1 của chúng tôi cũng sẽ co lại, như thể hiện trong ảnh chụp màn hình này.
Bây giờ chúng ta có thể thay đổi kích thước của H1 bằng cách sử dụng các giá trị REM như sau:
h1 {
font-size: 3.5rem; /* Equivalent to 35 pixels (3.5rem * 10px = 35px) */
}
H1 của chúng ta bây giờ sẽ lớn hơn với kích thước 35px=3,5REM.
Lợi ích của việc sử dụng REM trong CSS
Hầu hết mọi người đều quen với pixel (px) và tỷ lệ phần trăm làm đơn vị đo lường khi viết mã CSS. Tại sao không bám vào hai lựa chọn này thay vì chọn đơn vị REM? Đây là một số lý do để sử dụng REM:
- Tăng khả năng mở rộng: Bạn có thể thay đổi kích thước phông chữ của phần tử gốc, giúp các đơn vị REM có thể mở rộng được. Cách tiếp cận như vậy giúp dễ dàng thay đổi các đơn vị REM theo tỷ lệ. Đơn vị REM cũng sẽ điều chỉnh khi người dùng điều chỉnh kích thước phông chữ của trình duyệt.
- Dễ quản lý: Bạn có thể thay đổi phần tử gốc trong thẻ hoặc và các đơn vị REM sẽ tự động điều chỉnh. Cách tiếp cận này giúp bạn tránh khỏi việc phải điều chỉnh mọi thành phần trong tệp CSS của mình. Do đó, bạn có thể thay đổi kích thước phông chữ của tất cả H1 chỉ bằng một thay đổi.
- Định cỡ nhất quán: Đơn vị REM kiểm soát kích thước và khoảng cách phông chữ. Do đó, bạn được đảm bảo rằng bạn sẽ có kích thước phông chữ nhất quán trên các trang web của mình vì chúng có liên quan đến phần tử gốc.
- Giúp có các thiết kế đáp ứng: Bạn có thể tạo các thiết kế có thể điều chỉnh cho phù hợp với nhiều kích cỡ màn hình và thiết bị khác nhau. Khi các đơn vị REM được sử dụng cùng với truy vấn phương tiện, bạn có thể điều chỉnh kích thước phông chữ của phần tử gốc và các đơn vị khác sẽ điều chỉnh tương ứng.
CSS REM so với EM so với tỷ lệ phần trăm
Bạn có thể đã gặp pixel, REM, EM và tỷ lệ phần trăm khi viết mã CSS. Mặc dù tất cả các đơn vị này đều được sử dụng để xác định kích thước và khoảng cách phông chữ, nhưng chúng có thể áp dụng được trong các tình huống khác nhau và đi kèm với các tính năng khác nhau. Chúng ta hãy so sánh REM với các đơn vị khác nhau:
REM vs EM
REM và EM là các đơn vị tương đối, nghĩa là chúng thay đổi dựa trên một giá trị nhất định. Tuy nhiên, REM được gắn với phần tử gốc (), trong khi EM được gắn với phần tử cha (container). Chẳng hạn, bạn có một div hoạt động như cha mẹ và một div khác bên trong cha mẹ hoạt động như một đứa trẻ. Hãy nhìn vào mã này:
<div class="parent"> <p>This is the parent element.</p> <div class="child"> <p>This is the child element.</p> </div> </div>
Bạn có thể đặt đơn vị EM như sau:
.parent {
font-size: 1.5em;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.child {
font-size: 1.2em;
color: #333;
}
Chúng tôi đã chỉ định cho lớp .parent cỡ chữ là 1,5em. Tuy nhiên, phần tử .child có kích thước phông chữ là 1,2em, tương ứng với lớp cha. Tất cả những thay đổi trong lớp cha sẽ được tự động chuyển sang phần tử con.
REM so với tỷ lệ phần trăm
Đơn vị phần trăm tương ứng với kích thước/khoảng cách của phần tử gốc. Vì vậy, nếu chúng ta có phần tử cha, chẳng hạn như
có cỡ chữ 16px, chúng ta có thể đặt phần tử con, chẳng hạn nhưđể có cỡ chữ là 50%, nghĩa là nó là 50 /100*16=8px.
Bạn có thể minh họa điều này bằng mã này:
body {
font-size: 16px;
}
p {
font-size: 50%;
}
Chúng ta có thể tóm tắt mối quan hệ giữa REM, EM và Tỷ lệ phần trăm bằng bảng này:
Tính năngREMEMPhần trămTỷ lệ liên quan đến phần tử gốcPhần tử cha/vùng chứaPhần tử cha/bộ chứaKế thừaTừ gốcTừ cha mẹTừ cha mẹTrường hợp sử dụngThích hợp cho bố cục nhất quánThích hợp cho kích thước tương đốiThích hợp cho thiết kế đáp ứngKhả năng mở rộngCóCó Tương đối
Khi nào không nên sử dụng đơn vị REM
Bạn có thể muốn sử dụng đơn vị REM trong tất cả các phép đo CSS của mình do chúng có nhiều ưu điểm. Tuy nhiên, đây là một số trường hợp có thể không phù hợp:
- Khi xử lý bản in: Nếu bạn muốn in thứ gì đó thì bạn muốn đảm bảo rằng bạn đang xử lý các giá trị tuyệt đối. Trong những trường hợp như vậy, inch hoặc milimét cho phép bạn kiểm soát chính xác kích thước.
- Khi bạn muốn kiểm soát chi tiết hơn: Nếu bạn muốn kiểm soát kích thước của một phần tử được liên kết chặt chẽ với phần tử gốc, REM sẽ không phải là một lựa chọn tốt. Trong những trường hợp như vậy, các đơn vị tuyệt đối hoặc cố định như pixel sẽ là lựa chọn hoàn hảo.
- Khi xử lý hoạt ảnh và chuyển tiếp: Đơn vị REM không phù hợp khi bạn muốn kích thước của hoạt ảnh và chuyển tiếp thay đổi dần dần. Khi bạn sử dụng đơn vị REM, một thay đổi nhất định về kích thước phông chữ của phần tử gốc sẽ gây ra những thay đổi đột ngột trong quá trình chuyển đổi hoặc hoạt ảnh.
- Khi xử lý các trình duyệt cũ: Một số trình duyệt cũ hơn không hỗ trợ đơn vị REM. Trong những trường hợp như vậy, bạn có thể sử dụng tỷ lệ phần trăm hoặc đơn vị dựa trên pixel.
Phần kết luận
Bây giờ chúng tôi hy vọng bạn hiểu cách sử dụng REM trong CSS, tính toán chúng và nơi sử dụng chúng. Giá trị REM là giá trị tương đối, nghĩa là bạn có thể có kích thước phông chữ nhất quán trong ứng dụng của mình.
Mặt khác, pixel là giá trị tuyệt đối không thay đổi dựa trên kích thước của khung nhìn hoặc các phần tử xung quanh.
Tuy nhiên, các giá trị REM như vậy không thể áp dụng được trong mọi trường hợp, vì có một số trường hợp mà tỷ lệ phần trăm và pixel phù hợp hơn.
Tìm hiểu thêm về cách tạo kiểu bằng cách sử dụng các Tài nguyên CSS này.
Bài viết này hữu ích không?
Cảm ơn phản hôi của bạn!
