Kiến Thức Live
Khi đã quen thuộc với CSS, nhiều lập trình viên có thể cảm thấy mình đã thông thạo việc sử dụng nó. Tuy nhiên, đôi khi, ngay cả điều cơ bản nhất như đơn vị đo và cách sử dụng chúng cho các phần tử cũng chưa chắc đã hiểu rõ hoàn toàn.
Dẫn chứng cho việc này là khi tôi thử tìm kiếm trên Google về các đơn vị đo được định rõ trong CSS, ngay lập tức Google đưa ra các 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 tương đương với px” “1rem = px“.
Bạn có biết câu trả lời cho những câu hỏi này không? Nếu không, hãy theo dõi bài viết này của Kiến Thức Live nhé!
Bạn có biết 1em tương đương với bao nhiêu px, cách chuyển đổi rem sang px?
Thực chất, các đơn vị này có giá trị như thế nào và được sử dụng như thế nào. Đầu tiên, hãy cùng tìm hiểu qua về các đơn vị đo trong CSS. Trong CSS, có 2 nhóm đơn vị đo chính là: đơn vị tuyệt đối (absolute) và đơn vị tương đối (relative).
Đơn vị tuyệt đối là gì?
Đó là các đơn vị vật lý có sẵn đã được định nghĩa trước. Những đơn vị này không phụ thuộc và không bị ảnh hưởng bởi các yếu tố bên ngoài. Ví dụ như: met, centimet,… Các đơ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 dựa vào cách trang web hiển thị, phụ thuộc vào mật độ dpi (dots per inch) của thiết bị. Với các thiết bị low-dpi, 1px tương đương với 1 điểm ảnh, còn với các thiết bị có độ phân giải cao hoặc máy in, 1px sẽ tương đương với nhiều điểm ảnh hơn. - pt: 1inch = 72pt
Đơn vị tương đối là gì?
Đó là các đơn vị đo lường được sử dụng trong CSS ở mức độ tương đối, chúng có thể thay đổi dựa trên các yếu tố khác. Các đơn vị tương đối bao gồm:
Khi sử dụng đơn vị em và rem, người dùng có thể thiết kế linh hoạt và có khả năng thay đổi kích thước của các phần tử thay vì cố định một kích thước nhất định.
Điều này giúp dễ dàng hơn trong quá trình phát triển, phản ứng nhanh hơn. Không chỉ vậy, trải nghiệm tốt hơn trong nhiều môi trường khác nhau giúp cung cấp trải nghiệm tốt nhất cho người dùng. Cách sử dụng em và rem tương đối tương tự, vì vậy khi nào sử dụng em? Khi nào sử dụng rem?
Như đã đề cập trên kienthuclive.com, có một số câu hỏi mà Google gợi ý khi tra cứu. Hãy cùng giải đáp nhé
1em tương đương với bao nhiêu px? Cách chuyển đổi 1em sang px
1em tương đương với bao nhiêu px? Với đơn vị em, việc chuyển đổi sang px không phụ thuộc vào thuộc tính font-size của phần tử gốc html mà phụ thuộc vào font-size của phần tử hiện tại. Ví dụ, nếu có một div có class .test-em
.test-em { font-size: 10px; padding: 10em;}sau khi tính toán, kết quả sẽ như sau:
.test-em { font-size: 10px; padding-bottom: 100px; padding-left: 100px; padding-right: 100px; padding-top: 100px;}Khi sử dụng em, cần chú ý xem phần tử hiện tại có thể được kế thừa.inherit Thuộc tính font-size của phần tử cha (gốc) nào không được kế thừa, vì việc kế thừa sẽ ảnh hưởng đến cách chuyển đổi từ em sang đơn vị pixels. Để dễ quản lý quy đổi, có thể sử dụng rem thay vì em để thuận tiện cho việc tính toán.
Ví dụ với font-size mặc định = 16px, thì 1em = 16px.
Với 1rem bằng bao nhiêu px? Đổi 1rem sang px
Sau khi đã biết 1em tương đương bao nhiêu px? thì cách chuyển đổi 1rem ra px sẽ phụ thuộc vào kích thước font chữ của phần tử gốc của trang (html). Ví dụ: nếu html có font-size: 10px, khi đó một phần tử trong đó có width: 10rem -> sẽ chuyển thành width: 100px
Tương tự với em khi font-size mặc định = 16px, thì 1rem = 16px.
Tại sao nên sử dụng rem, em?
1em bằng bao nhiêu px? Kích thước của font chữ ảnh hưởng đến quá trình thiết kế website. Do đó, chúng ta nên sử dụng đơn vị rem, em để đảm bảo bố cục trang web sẽ được điều chỉnh linh động theo kích thước font chữ.
Ví dụ, trên các trình duyệt phổ biến: kích thước font chữ mặc định là 16px. Điều này giúp cho việc thiết kế ban đầu của trang web tập trung vào kích thước, giúp trang web trở nên gọn gang và dễ nhìn hơn.
Tuy nhiên khi chỉ sử dụng px, nếu một người dùng mở website của bạn trên một màn hình lớn hơn và tăng kích thước font chữ để dễ đọc, cấu trúc trang web sẽ bị méo mó.
Do đó, bằng cách sử dụng đơn vị rem hoặc em, bố cục trang web sẽ được bảo toàn và linh hoạt hơn. Điều này cũng áp dụng cho việc thiết kế website hiển thị trên cả máy tính và điện thoại thông minh. Việc sử dụng rem và em giúp giảm công việc phải thực hiện của một nhà phát triển.
Lời kết
Trên đây là cách chuyển đổi 1em bằng bao nhiêu px, 1em, rem = (bằng bao nhiêu) px, Đổi 1em 1rem sang px một cách chi tiết nhất. Hy vọng bài viết này hữu ích cho bạn. Chúc bạn thành công.
