em, rem trong css

Có thể bạn đã khá quen thuộc với CSS, nhưng nhiều lúc bạn không biết nên sử dụng đơn vị đo nào cho các element của mình. Mình đã thử search google về các đơn vị đo được định nghĩa trong CSS, rất dễ để thấy những câu hỏi được google suggest như "1em bằng bao nhiêu px", "1rem bằng bao nhiêu px" hay "1pt bằng bao nhiêu px". Vậy thực chất các đơn vị này có giá trị thế nào, và được dùng ra sao. Trước hết hãy cùng tìm hiểu sơ lược một chút về các đơn vị đo trong CSS

1. Sơ lược về các loại đơn vị

Cơ bản, các loại đơn vị này được chia thành 2 nhóm: đơn vị tuyệt đối (absolute) và đơn vị tương đối (relative). Đơn vị tuyệt đối : Là các đơn vị vật lý được định nghĩa sẵn. Các đơn vị này không phụ thuộc cũng những ko bị thay đổi bởi các tác động bên ngoài. Ví dụ như: met, centimet ... Các đơn vị tuyệt đối trong CSS gồm có:

• px : đây là đơn vị thường thấy được sử dụng trên màn hình hiển thị, 1px tương đương với một điểm ảnh trên màn hình hiển thị. Tuy nhiên pixels (px) có tính tương đối so với chế độ view của thiết bị, phụ thuộc vào mức dpi (dots per inch) của thiết bị. Đối với các thiết bị low-dpi thì 1px tương ứng với 1 dot còn với những thiết bị có độ phân giải cao hay máy in thì 1px sẽ tương ứng với nhiều dot hiển thị của thiết bị.
• pt: cứ 1inch = 72pt

Đơn vị tương đối : Là các đơn vị đo lường được sử dụng trong CSS ở mức tương đối, nó sẽ được thay đổi bởi các thành phần khác. Các đơn vị tương đối bao gồm:

• %
• em
• rem

Sử dụng em và rem cho phép chúng ta có một thiết kế linh hoạt và khả năng thay đổi kích thước các thành phần thay vì việc fix cứng một cách cố định kích thước. Sẽ dễ dàng hơn trong quá trình phát triển, reponsicve hơn đồng thời tương thích tốt hơn ở nhiều môi trường khác nhau để mang lại trải nghiệm người dùng tốt nhất. Cách làm việc của em và rem khá tương tự nhau do đó câu hỏi đặt ra là khi nào chúng ta sử dụng em ? khi nào thì lại sử dụng rem ?

Như ở đầu bài viết mình có đề cập đến một vài câu hỏi mà google gợi ý ra khi mình tìm kiếm. Vậy cùng trả lời nhé

2. 1rem bằng bao nhiêu px?

Kích thước của các phần tử sử dụng đơn vị rem sẽ được quy đổi sang pixels phụ thuộc vào kích thước font chữ của phẩn tử gốc của trang (phần tử html) Ví dụ: html có font-size: 10px; vậy thì một phần tử trong đó có width: 10rem; đổi ra sẽ có width: 100px

3. 1em bằng bao nhiêu px?

Đối với em, việc quy đổi sang px không dựa vào thuộc tính font-size của phần tử gốc html mà sẽ dựa vào font-size của phần tử chính phần tử hiện tại. Chẳng hạn ta có 1 div có class .test-em

.test-em {
  font-size: 10px;
  padding: 10em;
}

sau khi compute ta sẽ có như sau:

.test-em {
  font-size: 10px;
  padding-bottom: 100px;
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 100px;
}

Khi dùng em, còn phải chú ý xem phần tử hiện tại có kế thừa (inherit) thuộc tính font-size của phần tử cha nào không, vì sự kế thừa này sẽ ảnh hưởng đến cách quy đổi em sang pixels.

Vì vậy để cho dễ kiểm soát cách quy đổi có lẽ ta nên dùng rem thay vì em để tiện cho việc tính toán.

4. Tại sao nên sử dụng rem, em

Kích thước font chữ ảnh hưởng khá nhiều đến thiết kế của một website. Vì thế ta nên sử dụng rem, em để đảm bảo với bất kỳ kích thước font chữ nào người dùng thiết lập thì bố cục trang web của bạn cũng sẽ điều chỉnh phù hợp với kích thước font đó. Ví dụ trên các trình duyệt phổ biến, kích thước font mặc định là 16px. Do dó thiết kế ban đầu của website sẽ tập trung và kích thước đó, giúp cho website liền mạch và "dễ nhìn" hơn. Tuy nhiên nếu ta cứ dùng px mãi thì nếu một người dùng nào đó mang website của bạn và hiển thị nó trên một màn hình lớn hơn và tăng kích thương font lên đễ dễ nhìn, bạn sẽ thấy cấu trúc trang web của bạn đã bị lộn xộn. Vì thế bằng các sử dụng rem hay em, bố cục sẽ vẫn được bảo toàn và có thể được điều chỉnh một cách "flexible". Ta có thể thấy điều này trong các website thiết kế để hiện thị cả trên màn hình máy tính cũng như điện thoại. Việc sử dụng rem và em sẽ giúp giảm bớt công việc mà một developer phải làm. ^^