Công cụ này chuyển đổi những gì
Công cụ chuyển đổi giá trị pixel (px) sang rem và em, và ngược lại. Bạn nhập một giá trị vào bất kỳ ô nào trong ba ô — px, rem hoặc em — công cụ sẽ tự tính và hiển thị giá trị tương đương ở hai đơn vị còn lại. Đúng như phần gợi ý trên giao diện mô tả: "Nhập một giá trị px, rem hoặc em — hai giá trị còn lại sẽ tự động cập nhật khi bạn gõ." Bên cạnh ô giá trị, bạn còn chỉnh được cỡ chữ gốc và cỡ chữ ngữ cảnh em, để kết quả chuyển đổi khớp đúng với thiết lập trong CSS của dự án bạn đang làm, thay vì chỉ dựa trên một cỡ chữ mặc định chung chung.
Nhập cỡ chữ gốc, ngữ cảnh em và giá trị cần chuyển
Giao diện có ba nhóm nhập liệu. Trường "Cỡ chữ gốc (px)" là cỡ chữ nền của toàn trang, dùng làm mốc để tính rem. Trường "cỡ chữ ngữ cảnh em (px)" là cỡ chữ của chính phần tử đang xét, dùng làm mốc để tính em. Trường "Giá trị" là con số đại diện cho một độ dài, có thể nhập bằng px, rem hoặc em. Khi bạn sửa bất kỳ ô nào trong ba ô giá trị, hai ô còn lại cập nhật ngay khi bạn gõ, không cần bấm nút xác nhận. Mặc định, cỡ chữ gốc là 16px và cỡ chữ ngữ cảnh em cũng là 16px, nên ban đầu 16px bằng 1rem bằng 1em.
Đọc kết quả và bảng tra nhanh px → rem
Sau khi nhập, kết quả hiển thị là giá trị đã "Đã chuyển đổi trên cả ba đơn vị" — tức là cả px, rem và em đều được cập nhật cùng lúc theo cỡ chữ gốc và cỡ chữ ngữ cảnh em mà bạn đã đặt. Ví dụ, nếu cỡ chữ gốc đang là 16px và bạn nhập giá trị 24px, công cụ sẽ ra 24 chia 16 bằng 1,5rem. Nếu bạn đổi hướng và nhập 1,5rem với cùng cỡ chữ gốc 16px, kết quả px sẽ quay lại đúng 24px. Bên dưới khu vực nhập liệu là "Bảng chuyển đổi px → rem phổ biến (gốc 16px)", liệt kê sẵn một loạt giá trị pixel thường gặp cùng giá trị rem tương ứng khi cỡ chữ gốc là 16px, để bạn tra nhanh mà không cần tự bấm máy tính mỗi lần.
Cỡ chữ gốc thay đổi thì rem thay đổi theo
Cỡ chữ gốc chính là mẫu số dùng để tính rem. Nếu dự án của bạn đặt cỡ chữ gốc khác 16px, hãy sửa trường "Cỡ chữ gốc (px)" cho khớp, các giá trị rem sẽ tự tính lại theo mốc mới. Ví dụ nếu bạn đổi cỡ chữ gốc thành 20px và nhập giá trị 30px, kết quả sẽ là 30 chia 20 bằng 1,5rem — khác với kết quả 1,875rem nếu vẫn dùng mốc 16px (30 chia 16). Cỡ chữ gốc phải là một số lớn hơn 0; nếu không, công cụ sẽ báo lỗi.
Ngữ cảnh em: vì sao cần một cỡ chữ riêng
Khác với rem luôn dựa vào cỡ chữ gốc của trang, em dựa vào cỡ chữ của chính phần tử chứa nó — con số này có thể khác cỡ chữ gốc. Vì vậy công cụ tách riêng trường "cỡ chữ ngữ cảnh em (px)" để bạn khai báo đúng cỡ chữ của phần tử đang tính. Ví dụ, nếu phần tử đó có cỡ chữ 20px và bạn muốn biết 30px tương ứng bao nhiêu em, hãy đặt cỡ chữ ngữ cảnh em là 20px rồi nhập 30 vào ô giá trị px, kết quả sẽ là 30 chia 20 bằng 1,5em. Cỡ chữ ngữ cảnh em cũng phải là một số lớn hơn 0.
Giá trị âm và các thông báo lỗi cần biết
Công cụ cho phép nhập giá trị pixel âm, ví dụ -8px sẽ ra -0,5rem khi cỡ chữ gốc là 16px, hữu ích khi bạn cần tính các độ dời âm trong CSS. Ngược lại, ba trường nhập liệu đều có điều kiện hợp lệ riêng. Nếu ô "Giá trị" không phải là một số hợp lệ, công cụ hiển thị "Vui lòng nhập một số để chuyển đổi." Nếu ô cỡ chữ gốc không phải là một số lớn hơn 0, thông báo là "Cỡ chữ gốc phải là một số lớn hơn 0." Nếu ô cỡ chữ ngữ cảnh em không phải là một số lớn hơn 0, thông báo là "Cỡ chữ ngữ cảnh em phải là một số lớn hơn 0." — nhờ vậy bạn biết ngay cần sửa ô nào trước khi đọc tiếp kết quả.
Vì sao nên dùng rem và em thay vì px
Công cụ này phù hợp khi bạn cần đổi các giá trị px cố định sang đơn vị tương đối rem hoặc em để phục vụ thiết kế responsive, hoặc khi bạn muốn xem cỡ chữ gốc khác nhau ảnh hưởng thế nào đến giá trị rem cuối cùng. Nó cũng hữu ích khi bạn cần tính giá trị em dựa trên cỡ chữ của một phần tử cụ thể, hoặc khi bạn muốn đảm bảo các kích thước trong giao diện vẫn co giãn đúng nếu người đọc thay đổi cỡ chữ mặc định của trình duyệt. Mọi quá trình chuyển đổi đều chạy trong trình duyệt của bạn. Không có dữ liệu nào bạn nhập được tải lên BroBroGo.
Câu hỏi thường gặp
Cỡ chữ gốc và cỡ chữ ngữ cảnh em mặc định là bao nhiêu? Cả hai đều mặc định là 16px, nên ban đầu 16px, 1rem và 1em bằng nhau.
Tôi có thể nhập giá trị px âm không? Có. Công cụ cho phép nhập giá trị pixel âm và sẽ tính ra rem hoặc em âm tương ứng.
Nếu tôi đặt cỡ chữ gốc bằng 0 thì sao? Cỡ chữ gốc phải là một số lớn hơn 0. Nếu không, công cụ hiển thị "Cỡ chữ gốc phải là một số lớn hơn 0." và không tính tiếp.
Vì sao cần khai báo cỡ chữ ngữ cảnh em riêng thay vì dùng luôn cỡ chữ gốc? Vì em được đo dựa trên cỡ chữ của chính phần tử chứa nó, con số này thường khác với cỡ chữ gốc của cả trang, nên cần một trường riêng để nhập đúng cỡ chữ của phần tử đó.
Giá trị tôi nhập vào có được gửi lên máy chủ không? Không. Mọi quá trình chuyển đổi đều chạy trong trình duyệt của bạn, và không có dữ liệu nào bạn nhập được tải lên BroBroGo.