Khi đã quen thuộc với CSS, rất nhiều lập trình viên tưởng rằng đã nắm vững về nó. Nhưng đôi khi, ngay cái cơ bản nhất là đơn vị đo và cách sử đụng đơn vị đo nào cho các element chưa chắc đã nắm rõ. Bằng chứng là khi mình thử google search về những đơn vị đo được định nghĩa trong CSS, thì ngay lập tức google đưa ra những gợi ý như: 1em bằng bao nhiêu px? 1rem bằng bao nhiêu px? 1pt bằng bao nhiêu px ? "1em = px" "1em to px" "1rem = px". Vậy bạn có biết các câu trả lời trên không. Nếu không hãy theo dõi bài viết này của thủ thuật.vn nhé!
I. 1em, rem =( bằng bao nhiêu) px
Thực chất, các đơn vị này có giá trị thế nào, và được sử dụng ra sao. Trước hết, các bạn hãy cùng mình tìm hiểu sơ lược một chút về các đơn vị đo trong CSS. Trong CSS sử dụng 2 nhóm đơn vị đo là: đơn vị tuyệt đối (absolute) và đơn vị tương đối (relative).
1. Đơn vị tuyệt đối :
Là các đơn vị vật lý sẵn có đã được định nghĩa trước. Các đơn vị này không phụ thuộc cũng như không bị thay đổi bởi sự tác động bên ngoài. Ví dụ như: met, centimet,... Những đơn vị tuyệt đối trong CSS bao gồm:
- px : là đơn vị thường được sử dụng trên màn hình hiển thị, 1px tương đương với 1 đ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ị sử dụng, phụ thuộc vào mật độ dpi (dots per inch) của thiết bị. Đối với những thiết bị low-dpi thì 1px tương ứng với 1 dot, còn với các 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
2. Đơn vị tương đối :
Là những đơn vị đo lường được sử dụng trong CSS ở mức tương đối, nó có thể được thay đổi bởi các thành phần khác. Các đơn vị tương đối gồm có:
- %
- em
- rem
Khi sử dụng đơn vị em và rem cho phép người dùng có một thiết kế linh hoạt và khả năng thay đổi kích thước của các thành phần thay vì chỉ fix cứng một cách cố định kích thước. Điều này sẽ dễ dàng hơn trong quá trình phát triển, phản ứng nhanh hơn, đồng thời tương thích tốt hơn ở nhiều môi trường khác nhau giúp mang lại trải nghiệm tốt nhất cho người dùng. Cách làm việc của em và rem khá giống nhau, do đó khi nào chúng ta sử dụng em ? Khi nào sử dụng rem?
Như ở trên thủ thuật vn có đề cập đến một vài câu hỏi mà google gợi ý ra khi tìm kiếm. Vậy chúng ta cùng trả lời nhé
II. 1em bằng bao nhiêu px? Đổi 1 em to(sang) px
Đối với đơn vị 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ẽ phụ thuộc vào font-size của phần tử chính phần tử hiện tại. Chẳng hạn, chúng ta có 1 div có class .test-em
.test-em { font-size: 10px; padding: 10em; }sau khi compute, kết quả 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 (gốc) nào không, vì sự kế thừa sẽ ảnh hưởng đến cách quy đổi từ em sang pixels. Vì vậy để dễ kiểm soát cách quy đổi, có lẽ chúng ta nên dùng rem thay vì em để thuận tiện cho việc tính toán.
III. 1rem bằng bao nhiêu px? Đổi 1rem to(sang) px
Kích thước của các phần tử khi sử dụng đơn vị rem quy đổi sang pixels sẽ phụ thuộc vào kích thước của font chữ phẩn tử gốc của trang (phần tử html). Chẳng hạn: html có font-size: 10px, như vậy một phần tử trong đó có width: 10rem -> đổi ra width: 100px
IV. Tại sao nên sử dụng rem, em.
Kích thước của font chữ có ảnh hưởng khá nhiều đến quá trình thiết kế của một website. Vì thế, chúng ta nên sử dụng đơn vị rem, em để đảm bảo dù với kích thước font chữ bất kỳ nào thì người dùng thiết lập bố cục trang web sẽ được đ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 chữ mặc định là 16px. Do đó thiết kế ban đầu của website sẽ tập trung vào kích thước, giúp cho website liền mạch và "dễ nhìn" hơn. Tuy nhiên nếu chúngt ta chỉ dùng px thì nếu một người dùng nào đó mang website của bạn và hiển thị nó trên 1 màn hình lớn hơn và tăng kích thương font chữ lên để dễ nhìn, thì cấu trúc trang web của bạn sẽ bị lộn xộn.
Vì thế bằng cách sử dụng đơn vị rem hay em, bố cục sẽ được bảo toàn và có thể được điều chỉnh một cách "flexible". Các bạn 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 và điện thoại. Việc sử dụng đơn vị rem và em sẽ giúp giảm bớt công việc mà một developer phải làm.
V. Lời kết.
Trên đây là cách quy đổi 1em, rem = (bằng bao nhiêu) px, Đổi 1em 1rem to (sang) px một cách chi tiết nhất. Hi vọng bài viết giúp ích được cho các bạn. Chúc các bạn thành công.
