PX hay REM trong CSS? Hãy chỉ dùng REM
Share
CSS có rất nhiều đơn vị đo khác nhau mà bạn có thể chọn.
Trong nhiều trường hợp, có một đơn vị đo rõ ràng và tốt hơn các đơn vị đo khác.
Tuy nhiên, một câu hỏi luôn xuất hiện xuyên suốt sự nghiệp của tôi là, liệu rằng bạn nên sử dụng đợn vị Pixel hay REM trên một số thuộc tính nhất định dường như nó không tạo ra sự khác biệt rõ ràng.
Hôm nay tôi sẽ đi trả lời cho câu hỏi đó.
Thiết lập
Giả sử chúng ta có 1 đoạn HTML đơn giản với 2 đoạn văn bản: một sử dụng đơn vị Pixel và cái còn lại dùng đơn vị REM
PX vs. Rem
My font size is 24px
My font-size is 1.5rem
Pixel là đơn vị đo tuyệt đối, vì vậy khi bạn set thuộc tính font size là 24px, nó sẽ là 24px. Mặt khác REM là một đơn vị tương đối, nó sẽ tham chiếu theo thuộc tính font-size của phần tử HTML. Font size mặc định của văn bản là 16PX, vì vậy 1.5rem x 16px là tương đương với 24px
Thực tế thấy rằng REM là đơn vị tương đối và nó được tính dựa trên giá trị mặc định là 16px, điều đó làm chúng khó làm việc hơn so với pixel. Đó là tại sao tôi thường thấy mọi người thường sử dụng PIXEL. Tôi nghĩ đó là một sai lầm.
Vấn đề không thực tế
Trong quá khứ, có một số nhầm lẫn xung quanh việc điểm ảnh và mật độ hiển thị điểm ảnh, ảnh hưởng như thế nào tới hiển thị Retina và hiển thị độ phân giải cao. Không đi sâu vào vấn đề đó, đã có những thời điểm mà pixel được tính toán khó hiểu, nhưng vấn đề đó đã được xử lý.
Và kể từ khi vấn đề được xử lý, một cuộc tranh cãi tôi đang thấy là người dùng có thể tăng giảm font size bằng cách phóng to, thu nhỏ trình duyệt, và cả 2 đơn vị PX và REM đề tăng giảm như nhau.
Do đó một vài người nói rằng việc sử dụng PX hay REM không còn quan trọng nữa.
Nhưng thực tế thì nó quan trọng
Vấn đề thực tế
Vấn đề này thực sự liên tới cách các đơn vị đo trong CSS phản hồi như thế nào với cài đặt trong trình duyệt.
Người dùng có thể cài đặt trình duyệt của họ và sửa font size mặc định của trình duyệt
Điều này là rất tốt cho những người dùng có thị lực kém.
Tuy nhiên, nếu bạn kiểm tra trình duyệt, văn bản với đơn vị tuyệt đối là 24px sẽ luôn là 24px bất kể tuỳ chọn người dùng cài đặt là gì. Đơn vị tương đối, mặt khác sẽ tăng cùng với cài đặt mặc định của trình duyệt.
Vì vậy đây thực sự là một mối bận tâm với Accesibility
Do vậy, bất cứ khi nào bạn quyết định font-size, bạn nên cân nhắc sử dụng đơn vị REM.
The Nuance (Không biết chuyển nghĩa từ này như nào)
Tất nhiên, vì chúng ta đang nói tới lập trình web, cuộc thảo luận là mang nhiều sắc thái.
Ví dụ, với những thuộc tính khác thì sao như: padding, và border.
<!DOCTYPE html>
<html>
<body>
<h1>PX vs. Rem</h1>
<p style="
font-size: 24px;
padding: 16px;
border: 2px solid;
background: tomato;
">
My font size is 24px
</p>
<p style="
font-size: 1.5rem;
padding: 1rem;
border: .125rem solid;
background: powderblue;
">
My font-size is 1.5rem
</p>
</body>
</html>
Trong ví dụ này, ngoài font size chúng ta sẽ so sánh giữa PX vs REM. cho thuộc tính padding và border-width
Như bạn mong đợi đoạn văn thứ 2 ngoài font size thì có padding và border width lớn hơn bởi vì đơn vị REM tăng theo cài đặt của trình duyệt.
Và điều này cho chúng ta thấy nó còn phụ thuộc vào ngữ cảnh của câu chuyện. Padding và border width không thực sự liên quan tới Accessibility. Vì vậy bạn có muốn padding hoặc border-width hay bất kỳ thuộc tính nào khác có thay đổi nếu người dùng thay đổi cài đặt của họ hay không?
Điều này tuỳ vào bạn.
Nó thậm chí còn khó hiểu hơn khi bạn nói về Media queries hoặc Container Queries. Nó phức tạp để giải thích, nhưng hiểu đơn giản, nếu font chữ tăng cùng với cài đặt của trình duyệt, có lẽ bạn cũng muốn Media queries của bạn phản hồi tương tự. Điều này có nghĩa bạn cũng cần xác định chúng với đơn vị REM hoặc EM
Tất nhiên, có nhiều yếu tố tác động vào đó và tôi không muốn bị lạc trong đám cỏ dại. May mắn, có một bài viết vào năm 2016 đã giải quyết cơ bản câu hỏi đó có tên “PX, EM or REM media queries” viết bởi Zell Liew.
Về cơ bản, nó kết luận bằng cách nói rằng đơn vị EM và đơn vị REM sẽ tốt hơn cho media queries so với đơn vị pixel và vì đơn vị EM dựa trên phần tử cha của chúng, nhưng media queries ảnh hưởng đến phần tử root, cả EM và REM đều khá giống nhau .
Chỉ có một khác biệt liên quan tới một lỗi trên Safari với đơn vị REM, do đó đơn vị EM là ổn định hơn một chút, nhưng tôi nghĩ rằng lỗi thì sẽ được sửa. Vì vậy tôi chỉ muốn sử dụng đơn vị REM.
Câu trả lời ngắn gọn
Vì vậy để trả lời cho câu hỏi, một lần và mãi mãi, khi nào bạn nên sử dụng đơn vị PIXEL hoặc REM, câu trả lời nhanh là:
Chỉ sử dụng đơn vị REM
Tất nhiên sẽ là có các trường hợp khác nhau, và cả các trường hợp ngoại lệ. Có cả các trường hợp đơn vị Pixel sẽ thực sự là tốt nhất.
(Bạn thực sự nên kiểm tra ứng dụng của mình với nhiều cài đặt trình duyệt khác nhau để thấy được điều đó)
Nhưng
Đơn vị REM là dễ tiếp cận hơn với thuộc tính font-size.
REM (có lẽ) là tốt hơn cho media queries.
Và tôi nghĩ rằng tuân theo một quy tắc đơn giản(có những trường hợp ngoại lệ) sẽ dễ dàng hơn là trộn lẫn mọi thứ.
Cuối cùng, tất cả phụ thuộc vào cách mọi thứ nên thay đổi dựa trên cài đặt trình duyệt của người dùng, vì vậy nó có thể không quan trọng lắm với bạn. Nhưng nó rõ ràng với tôi rằng mọi thứ sẽ tăng hoặc giảm cùng một tỉ lệ.
Nếu bạn cảm thấy điều này khác với bạn hoặc bạn thích tham gia vào cuộc trò chuyện, tôi muốn nghe ý kiến của bạn.
Bài viết được lược dịch từ:
PX or REM in CSS? Just Use REM