1em, rem =( bằng bao nhiêu) px, Đổi 1em 1rem to(sang) px

Bạn đã quen thuộc với CSS, bạn nghĩ mình đã nắm vững về nó. Rất nhiều lập trình viên cũng nghĩ như vậy. Nhưng ngay cái cơ bản nhất là đơn vị đo và sử đụng đơn vị đo nào cho các element chưa chắc bạn đã nắm rõ.

Bằng chứng là mình thử google search về các đơn vị đo được định nghĩa trong CSS, vâng đập vào mặt là những google suggest như "1em = px" "1em to px" "1rem = px" "1em bằng bao nhiêu px", "1rem bằng bao nhiêu px" hay "1pt bằng bao nhiêu px",

1em, rem =( 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 nhé. CSS sử dụng 2 nhóm đơn vị đo là đơ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ư ở trên 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 chúng ta cùng trả lời nhé

1em bằng bao nhiêu px? Đổi 1em to(sáng) 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.

1rem bằng bao nhiêu px? Đổi 1rem to(sáng) 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

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. ^^