Chuyển Đổi Đơn Vị CSS cho px, rem và em
Công cụ chuyển đổi đơn vị CSS biến một giá trị px sang rem (hoặc rem sang px, px sang em) thành mọi đơn vị còn lại ngay khi bạn gõ, dựa trên cỡ chữ gốc của riêng bạn. Nhập một số, chọn đơn vị bạn bắt đầu, rồi đọc px, rem và em cạnh nhau.
Công cụ được xây cho lập trình viên front-end và nhà thiết kế đang chuyển bố cục từ pixel cố định sang đơn vị tương đối. Đặt cỡ chữ gốc khớp với html { font-size } của bạn, phép tính sẽ chính xác theo đúng dự án thật thay vì mặc định cứng 16px.
Cách Chuyển Đổi Đơn Vị CSS
Đặt cỡ chữ gốc
Cỡ Chữ Gốc khởi đầu ở 16px, mức mặc định tiêu chuẩn của trình duyệt. Đổi nó cho khớp với html { font-size } gốc của dự án để kết quả rem và em chính xác.
Chọn đơn vị đầu vào
Nhấn thẻ px, rem hoặc em để báo cho công cụ biết giá trị của bạn đang ở đơn vị nào.
Nhập giá trị
Gõ một số bất kỳ và xem px, rem và em cập nhật theo thời gian thực. Chạm một nút Thử ví dụ như 16px hoặc 1.5rem để nạp ngay một giá trị thông dụng.
Sao chép kết quả
Nhấn nút sao chép cạnh bất kỳ hàng nào để chép giá trị kèm hậu tố đơn vị, ví dụ 1.5rem, sẵn sàng dán thẳng vào CSS của bạn.
Cần một chiều duy nhất? Mở một cặp tập trung như PX sang REM, REM sang PX hoặc PX sang EM. Cả hai ô đều chỉnh sửa được nên bạn có thể gõ vào ô nào cũng được, và nút Hoán đổi sẽ lật sang cặp ngược lại mà vẫn giữ giá trị của bạn.
Tính Năng
Chuyển Đổi Thời Gian Thực
Giá trị cập nhật ngay khi bạn gõ, chuyển đổi giữa px, rem và em mà không cần nhấn nút nào.
Cỡ Chữ Gốc Tùy Chỉnh
Đặt cỡ chữ gốc từ 1 đến 100px (mặc định 16px) để rem và em khớp với dự án thật của bạn.
Số Chữ Số Thập Phân Điều Chỉnh Được
Chọn 1 đến 6 chữ số thập phân để kiểm soát độ chính xác của giá trị kết quả.
Cặp Hai Chiều
Trong các cặp tập trung PX sang REM, REM sang PX và PX sang EM, gõ vào ô nào thì ô kia tự theo.
Đảo Chiều
Một cú nhấn đảo ngược cặp chuyển đổi và mang giá trị hiện tại sang chiều ngược lại.
Bảng Tra Cứu Nhanh
Một bảng mở rộng được hiển thị 18 giá trị pixel thông dụng từ 8px đến 96px cùng giá trị rem và em tương đương.
Sao Chép Một Chạm
Chép bất kỳ kết quả nào kèm hậu tố đơn vị, như 1.5rem, để dán thẳng vào stylesheet của bạn.
Nút Ví Dụ Nhanh
Các nút sẵn cho cỡ thông dụng như 12px, 16px, 24px và 1.5rem nạp một giá trị chỉ với một chạm.
Thẻ Thông Tin Đơn Vị
Các thẻ ngắn giải thích px, rem và em là gì và khi nào nên chọn từng đơn vị.
Cài Đặt Được Lưu, Dùng Chung
Cỡ chữ gốc và số chữ số thập phân được giữ lại qua localStorage và đồng bộ giữa trang chính và mọi cặp.
Câu Hỏi Thường Gặp
Chuyển px sang rem như thế nào?
Chia giá trị pixel cho cỡ chữ gốc (root): rem = px ÷ cỡ gốc. Với cỡ gốc mặc định 16px, 24px thành 1.5rem. Công cụ này tự làm phép chia và cập nhật ngay khi bạn gõ, nên bạn không bao giờ phải tính tay.
Công thức rem sang px là gì?
Nhân giá trị rem với cỡ chữ gốc: px = rem × cỡ gốc. Ở cỡ gốc 16px, 1.5rem bằng 24px. Đổi ô Cỡ Chữ Gốc nếu dự án của bạn dùng cỡ gốc khác, và kết quả sẽ thay đổi theo.
rem có luôn dựa trên 16px không?
16px chỉ là mặc định. rem tương đối so với cỡ chữ của phần tử gốc <html>, mà phần lớn trình duyệt đặt là 16px, nhưng bạn có thể đổi trong CSS. Đó là lý do công cụ có ô Cỡ Chữ Gốc — đặt bằng cỡ gốc thật của dự án để kết quả chính xác.
em và rem khác nhau ở đâu?
rem luôn tương đối so với cỡ chữ của phần tử gốc, nên nó nhất quán trên toàn trang. em tương đối so với cỡ chữ của phần tử cha, nghĩa là giá trị em nhân dồn khi các phần tử lồng nhau — 1.2em bên trong 1.2em cho ra 1.44× cỡ gốc.
Khi nào nên dùng rem thay cho px?
Dùng rem cho kiểu chữ, khoảng cách và kích thước bố cục mà bạn muốn co giãn theo tùy chọn của người dùng — những người đọc tăng cỡ chữ mặc định của trình duyệt sẽ hưởng lợi từ thiết kế dựa trên rem. Giữ px cho những thứ cần cố định, như viền và đổ bóng.
Vì sao cặp PX sang EM hiển thị "Cỡ Chữ Phần Tử Cha"?
Vì em tương đối so với cỡ chữ của phần tử cha chứ không phải phần tử gốc. Nhãn đổi thành Cỡ Chữ Phần Tử Cha để nhắc rằng cỡ tham chiếu phụ thuộc vào vị trí của phần tử trong DOM, không phải cỡ gốc <html>.
Cài đặt của tôi có được lưu giữa các lần truy cập không?
Có. Cỡ chữ gốc và số chữ số thập phân của bạn được lưu trong localStorage của trình duyệt và dùng chung giữa công cụ chính và mọi cặp tập trung. Chúng vẫn còn sau khi bạn đóng trình duyệt, và không có gì được gửi lên máy chủ.
Chưa có bình luận nào. Hãy là người đầu tiên!