Đổi qua lại giữa px, em và rem: hiểu mốc quy chiếu trước khi đổi
Công cụ đổi giá trị giữa pixel, em và rem theo một cỡ chữ gốc do bạn đặt, mặc định là 16 pixel như thiết lập của trình duyệt. Ba ô nhập liên kết hai chiều nên gõ ở ô nào cũng được, kèm bảng tra sẵn mười sáu cỡ chữ thông dụng có cả cột phần trăm để đối chiếu nhanh.
Tính năng nổi bật
- Ba ô nhập liên kết hai chiều cho pixel, em và rem, gõ ở ô nào thì hai ô còn lại tự cập nhật
- Ô đặt cỡ chữ gốc riêng, cho phép tính theo mốc khác 16 pixel khi dự án của bạn dùng mốc khác
- Làm tròn tới bốn chữ số thập phân rồi tự cắt các số 0 thừa ở đuôi cho gọn
- Bảng tra mười sáu cỡ chữ thông dụng từ 8 tới 72 pixel, đủ dùng cho hầu hết giao diện
- Bảng tra có thêm cột phần trăm bên cạnh, tiện khi bạn làm việc với thư viện cũ dùng đơn vị này
- Bấm vào một dòng trong bảng là nạp luôn giá trị đó lên ba ô nhập phía trên
- Nút sao chép riêng cho từng đơn vị, chuỗi chép ra đã kèm sẵn tên đơn vị
- Chạy hoàn toàn trong trình duyệt, không cần đăng nhập và không lưu gì lại
Vì sao vẫn cần đổi đơn vị dù pixel dễ hiểu hơn nhiều
Người thiết kế giao tài liệu bằng pixel vì phần mềm thiết kế làm việc trên lưới điểm ảnh. Nhưng giao diện web viết bằng pixel cứng lại chặn mất một thứ quan trọng: khi người dùng vào phần cài đặt trình duyệt và tăng cỡ chữ mặc định lên vì mắt kém, mọi giá trị pixel vẫn đứng yên. Đây không phải chuyện hiếm gặp, và người bị ảnh hưởng thường là nhóm cần đọc được nhất. Dùng rem thì toàn bộ giao diện nở ra theo đúng tỷ lệ mà bố cục vẫn giữ nguyên cấu trúc. Vấn đề là bạn không thể yêu cầu người thiết kế nghĩ bằng rem, và cũng không nên nhẩm phép chia trong đầu hàng trăm lần mỗi ngày. Công cụ này lấp đúng khoảng giữa đó: nhận con số từ tài liệu thiết kế, trả về giá trị dùng được trong tệp định kiểu, và cho phép đổi mốc quy chiếu khi dự án của bạn không dùng mốc mặc định.
Lợi ích khi sử dụng
- Bớt được thao tác nhẩm chia lặp đi lặp lại khi chuyển tài liệu thiết kế thành mã
- Đổi được mốc quy chiếu nên dùng đúng cho cả dự án dùng mốc 16 lẫn dự án dùng mốc khác
- Bảng tra bao phủ dải cỡ chữ thường dùng nên phần lớn thời gian chỉ cần liếc mắt
- Cột phần trăm có sẵn, tiện khi phải làm việc với mã cũ hoặc với thư điện tử dạng HTML
- Kết quả cắt sạch số 0 thừa nên dán vào tệp định kiểu là dùng được ngay
Cách đổi đơn vị cho đúng
- 1Xác định cỡ chữ gốc của dự án và nhập vào ô trên cùng; nếu tệp định kiểu của bạn không đặt lại cỡ chữ cho thẻ gốc thì giữ nguyên 16.
- 2Gõ giá trị pixel lấy từ tài liệu thiết kế vào ô pixel, hai ô còn lại sẽ hiện giá trị tương ứng ngay lập tức.
- 3Khi cần giá trị rem, lấy thẳng con số ở ô rem vì rem luôn quy chiếu về cỡ chữ của thẻ gốc.
- 4Khi cần giá trị em, hãy đổi ô cỡ chữ gốc thành cỡ chữ của phần tử cha rồi mới đọc kết quả, vì em quy chiếu về cha chứ không về gốc.
- 5Với các cỡ hay dùng, bấm thẳng vào dòng tương ứng trong bảng tra bên dưới thay vì gõ lại.
Ba đơn vị và mốc quy chiếu của từng đơn vị
Pixel trong CSS không phải điểm ảnh vật lý của màn hình mà là một đơn vị quy ước, được trình duyệt quy đổi sang điểm ảnh thật theo tỷ lệ hiển thị của thiết bị. Nó cố định, không phụ thuộc bất cứ thứ gì khác trong tài liệu. Rem lấy mốc là cỡ chữ của thẻ gốc, tức thẻ html; mặc định của trình duyệt là 16 pixel nhưng người dùng đổi được trong phần cài đặt, và bạn cũng ghi đè được bằng CSS. Điểm mạnh của rem là mốc chỉ có một, nên 1,5rem ở bất kỳ đâu trong tài liệu cũng cho ra cùng một giá trị. Em lấy mốc là cỡ chữ của chính phần tử đang xét, hoặc của phần tử cha khi em được dùng cho chính thuộc tính cỡ chữ. Nghĩa là 1,5em không có một giá trị cố định: nó phụ thuộc vào nơi bạn đặt nó. Đơn vị phần trăm khi dùng cho cỡ chữ hoạt động gần như em, chỉ khác cách viết. Công cụ này quy đổi cả em lẫn rem theo cùng một mốc bạn nhập, nên với rem thì kết quả luôn đúng, còn với em thì chỉ đúng khi mốc bạn nhập trùng với cỡ chữ của phần tử cha.
Bẫy dồn tích của em trong cấu trúc lồng nhau
Đây là lý do chính khiến nhiều dự án bỏ em cho cỡ chữ. Vì em quy chiếu về cha, các giá trị nhân dồn lên nhau qua từng tầng. Giả sử bạn đặt cỡ chữ 0,9em cho một lớp danh sách, rồi đặt danh sách lồng trong danh sách. Tầng một cho 0,9 nhân 16 bằng 14,4 pixel. Tầng hai cho 0,9 nhân 14,4 bằng khoảng 12,96 pixel. Tầng ba xuống còn khoảng 11,66 pixel, và tới tầng bốn thì chữ nhỏ tới mức khó đọc, dù bạn chỉ viết đúng một dòng CSS. Điều đáng sợ là nó không lộ ra khi bạn thử với dữ liệu mẫu chỉ có một tầng, mà lộ ra khi khách nhập nội dung thật có danh sách lồng nhau. Rem không có vấn đề này vì mốc luôn là thẻ gốc, không quan tâm phần tử nằm sâu bao nhiêu tầng. Vì vậy quy tắc dùng được cho phần lớn dự án là dùng rem cho cỡ chữ và cho khoảng cách theo bố cục, còn dùng em cho những khoảng cách phải bám theo cỡ chữ của chính thành phần đó, chẳng hạn khoảng đệm bên trong nút bấm để nút tự nở ra khi chữ to lên.
Mẹo đặt cỡ chữ gốc 62,5 phần trăm và cái giá của nó
Một cách làm khá phổ biến là đặt cỡ chữ cho thẻ gốc bằng 62,5 phần trăm, tức 10 pixel khi mặc định là 16. Khi đó phép đổi trở nên rất dễ nhẩm: 1,6rem là 16 pixel, 2,4rem là 24 pixel, chỉ cần dịch dấu phẩy. Nhiều nhóm chọn cách này để giảm ma sát khi chuyển từ tài liệu thiết kế sang mã. Nhưng cần biết cái giá đi kèm. Thứ nhất, mọi phần tử không được đặt cỡ chữ tường minh sẽ thừa kế cỡ 10 pixel, quá nhỏ để đọc, nên bạn buộc phải đặt lại cỡ chữ cho thẻ body và nhớ đặt cho mọi thành phần dùng chung. Thứ hai, nội dung đến từ nguồn bên ngoài như tiện ích nhúng hay đoạn mã của bên thứ ba sẽ hiển thị bé bất thường vì chúng viết theo giả định mốc 16. Thứ ba, khi người dùng chỉnh cỡ chữ mặc định trong trình duyệt thì tỷ lệ vẫn giữ đúng, nên riêng điểm này không bị ảnh hưởng. Nếu bạn dùng mẹo này, hãy nhập 10 vào ô cỡ chữ gốc của công cụ để mọi con số đổi ra khớp với dự án.
Khi nào nên giữ pixel thay vì đổi sang rem
Không phải giá trị nào cũng nên đổi. Đường viền mảnh một pixel nên giữ nguyên pixel, vì đổi sang rem sẽ cho ra giá trị lẻ và trình duyệt phải làm tròn khi vẽ, dẫn tới đường viền lúc đậm lúc nhạt hoặc biến mất trên một số tỷ lệ hiển thị. Bóng đổ và những chi tiết trang trí rất nhỏ cũng vậy: chúng thuộc về lớp hình ảnh chứ không thuộc lớp nội dung, và việc chúng nở ra theo cỡ chữ không mang lại lợi ích gì. Ảnh và biểu tượng có kích thước cố định theo tệp gốc thường nên để pixel để không bị mờ. Ngược lại, có một chỗ nhiều người tưởng dùng rem được nhưng thực tế không nên: điều kiện truy vấn theo bề rộng màn hình. Ở vị trí đó, trình duyệt luôn quy chiếu về cỡ chữ mặc định gốc chứ không lấy giá trị bạn đặt cho thẻ html, nên nếu bạn dùng mẹo 62,5 phần trăm rồi viết điểm ngắt theo rem thì kết quả không giống như bạn tưởng. Cách an toàn là viết điểm ngắt theo pixel, hoặc tính rem theo mốc 16 chứ không theo mốc bạn tự đặt.
Chuyển một dự án từ pixel sang rem mà không vỡ giao diện
Đổi hàng loạt bằng tìm và thay thế là cách nhanh nhất để làm hỏng mọi thứ, vì như đã nói không phải giá trị nào cũng nên đổi. Cách làm ổn hơn là đi theo từng lớp. Bắt đầu với cỡ chữ: đây là nhóm hưởng lợi nhiều nhất và cũng dễ kiểm chứng nhất bằng mắt. Tiếp theo là khoảng cách theo chiều dọc, tức khoảng đệm trên dưới và khoảng cách giữa các khối, vì chúng cần giãn ra cùng nhịp với chữ để giao diện không bị chật khi người dùng phóng to. Sau đó tới chiều rộng tối đa của khối chữ, thứ nên đo theo số ký tự hoặc theo rem chứ không theo pixel. Giữ nguyên pixel cho đường viền, bóng đổ và các chi tiết trang trí nhỏ. Trong lúc chuyển, hãy dựng sẵn một bộ biến chứa các bước khoảng cách viết bằng rem rồi dùng lại, thay vì rải số lẻ khắp nơi; con số như 0,3125rem rất khó đọc và không ai nhớ nó tương ứng bao nhiêu pixel. Cuối cùng, kiểm chứng bằng cách đặt cỡ chữ mặc định của trình duyệt lên hai mươi bốn pixel rồi duyệt lại toàn bộ giao diện.
Câu hỏi thường gặp (FAQ)
Em và rem khác nhau ở điểm nào?
Rem luôn quy chiếu về cỡ chữ của thẻ gốc nên 1,5rem ở bất kỳ đâu cũng cho cùng một giá trị. Em quy chiếu về cỡ chữ của phần tử cha, nên cùng một giá trị em sẽ ra kích thước khác nhau tùy vị trí đặt. Chính vì thế em dễ bị dồn tích khi các phần tử lồng nhau, còn rem thì không.
Vì sao công cụ trả cùng một con số cho cả em và rem?
Vì cả hai đều được chia cho mốc bạn nhập ở ô cỡ chữ gốc. Với rem thì kết quả luôn đúng vì mốc là thẻ gốc. Với em, kết quả chỉ đúng khi mốc bạn nhập trùng với cỡ chữ của phần tử cha. Muốn đổi em cho một phần tử nằm trong khối có cỡ chữ 20 pixel, hãy nhập 20 vào ô cỡ chữ gốc.
Cỡ chữ gốc mặc định là bao nhiêu?
Các trình duyệt phổ biến đều mặc định 16 pixel cho thẻ gốc. Nhưng đây là giá trị người dùng đổi được trong phần cài đặt, và nhiều người thị lực kém thực sự có đổi. Đó chính là lý do dùng rem có ý nghĩa: giao diện của bạn sẽ tôn trọng lựa chọn đó thay vì phớt lờ nó như khi dùng pixel cứng.
Có nên đặt cỡ chữ gốc bằng 10 pixel để dễ tính không?
Cách này giúp phép đổi chỉ còn là dịch dấu phẩy nên khá tiện, nhưng phải trả giá. Mọi thành phần không đặt cỡ chữ tường minh sẽ thừa kế cỡ 10 pixel quá nhỏ, và nội dung nhúng từ bên thứ ba sẽ hiển thị bé bất thường vì chúng giả định mốc 16. Nếu dùng, hãy nhớ đặt lại cỡ chữ cho thẻ body ngay.
Điểm ngắt trong truy vấn theo bề rộng nên dùng đơn vị nào?
Nên dùng pixel, hoặc dùng rem nhưng tính theo mốc 16 chứ không theo mốc bạn tự đặt cho thẻ gốc. Lý do là ở vị trí đó, trình duyệt luôn quy chiếu về cỡ chữ mặc định gốc và bỏ qua giá trị bạn ghi đè cho thẻ html. Đây là chỗ rất hay gây bất ngờ với người dùng mẹo đặt gốc bằng 10 pixel.
Đường viền một pixel có nên đổi sang rem không?
Không nên. Đổi ra sẽ cho giá trị lẻ và trình duyệt phải làm tròn khi vẽ, khiến đường viền lúc đậm lúc nhạt hoặc biến mất hẳn trên một số tỷ lệ hiển thị. Đường viền, bóng đổ và các chi tiết trang trí rất nhỏ thuộc lớp hình ảnh, việc chúng nở theo cỡ chữ không mang lại lợi ích thực tế nào.
Đơn vị phần trăm trong cột bảng tra dùng vào việc gì?
Khi áp cho thuộc tính cỡ chữ, phần trăm hoạt động gần như em, tức quy chiếu về cha, chỉ khác cách viết. Nó vẫn xuất hiện nhiều trong mã cũ và trong thư điện tử dạng HTML, nơi một số phần mềm đọc thư xử lý phần trăm ổn định hơn các đơn vị khác. Với dự án mới thì rem là lựa chọn rõ ràng hơn.
Vì sao chữ trong danh sách lồng nhau cứ nhỏ dần?
Gần như chắc chắn bạn đang dùng em cho cỡ chữ. Mỗi tầng lồng nhân thêm một lần vào cỡ chữ của tầng cha, nên bốn tầng liên tiếp với hệ số 0,9 sẽ kéo chữ từ 16 pixel xuống dưới 11 pixel. Cách xử lý là chuyển sang rem cho cỡ chữ, hoặc chỉ định lại cỡ chữ tường minh cho các tầng lồng.
Nên dùng em ở những chỗ nào?
Ở những khoảng cách cần bám theo cỡ chữ của chính thành phần đó. Ví dụ khoảng đệm bên trong nút bấm đặt bằng em sẽ khiến nút tự nở ra cân đối khi bạn dùng lại nút đó với cỡ chữ lớn hơn. Tương tự với khoảng cách giữa biểu tượng và chữ bên cạnh nó, hoặc bán kính bo góc của thẻ nhãn nhỏ.
Số lẻ nhiều chữ số thập phân khi đổi có sao không?
Về hiển thị thì không, vì trình duyệt tự xử lý phần làm tròn khi vẽ. Vấn đề là ở con người: giá trị như 0,3125rem không ai nhớ tương ứng bao nhiêu pixel, khiến mã khó bảo trì. Cách xử lý là dựng sẵn một bộ biến chứa các bước khoảng cách rồi dùng lại, thay vì rải số lẻ khắp tệp định kiểu.
Dùng rem có ảnh hưởng tới tối ưu tìm kiếm không?
Không ảnh hưởng trực tiếp vì đây chỉ là đơn vị trình bày. Nhưng nó liên quan gián tiếp tới trải nghiệm: giao diện tôn trọng thiết lập cỡ chữ của người dùng thì dễ đọc hơn và ít bị bỏ trang giữa chừng hơn. Ngoài ra tiêu chí về khả năng tiếp cận cũng yêu cầu nội dung phải đọc được khi phóng to tới hai trăm phần trăm.
Chuyển cả dự án từ pixel sang rem có nên làm bằng tìm và thay thế không?
Không nên, vì cách đó đổi luôn cả những giá trị lẽ ra phải giữ pixel như đường viền và bóng đổ. Hãy đi theo từng lớp: cỡ chữ trước, rồi tới khoảng cách theo chiều dọc, rồi tới chiều rộng tối đa của khối chữ. Sau khi xong, đặt cỡ chữ mặc định của trình duyệt lên hai mươi bốn pixel rồi duyệt lại toàn bộ giao diện.
Từ khóa liên quan
- đổi px sang rem
- px to rem converter
- em và rem khác nhau thế nào
- rem trong css là gì
- cỡ chữ gốc html 16px
- mẹo 62.5 phần trăm rem
- px sang em online
- bảng chuyển đổi px rem
- đơn vị css nên dùng
- media query dùng px hay rem
- em bị dồn tích khi lồng nhau
- font size responsive css
- rem cho padding và margin
- border 1px có nên đổi rem
- phóng to trang 200 phần trăm
- đơn vị phần trăm cho font size
- chuyển dự án từ px sang rem
- khả năng tiếp cận cỡ chữ
- css unit converter online
- công cụ đổi đơn vị css miễn phí
