Pixels to rem
Chuyển đổi giá trị pixel thành rem cho bố cục CSS hiện đại. rem chia tỷ lệ theo kích thước phông chữ gốc của người dùng — khả năng truy cập tốt hơn so với px cố định. Gốc của trình duyệt mặc định thường là 16 px, vì vậy 24 px = 1,5 rem trừ khi dự án ghi đè html { font-size }.
Pixel
Cỡ chữ gốc (root) (px)
Kết quả
1rem
Cách chuyển đổi px thành rem
1. Nhập giá trị pixel từ thiết kế của bạn (ví dụ: 32 px).
2. Đặt kích thước phông chữ gốc (mặc định là 16 px nếu không thay đổi).
3. Sao chép kết quả rem vào biểu định kiểu của bạn.
4. Sử dụng rem cho kích thước phông chữ, khoảng cách và tỷ lệ thành phần; px cho đường viền chân tóc nếu cần.
Ví dụ về Px to rem
Loại nội dung và tiêu đề
16 px = 1 rem (mặc định). Tiêu đề 24 px = 1,5 rem. 14 px = 0,875 rem văn bản nhỏ.
Gốc tùy chỉnh 10 px (hệ thống thiết kế)
Một số nhóm đặt html { font-size: 62,5% } nên 1 rem = 10 px. Sau đó, mã thông báo thiết kế 32 px = 3,2 rem.
Tỷ lệ khoảng cách
Lưới 8 px → 0,5 rem ở gốc 16 px. Phần đệm 16 px = 1 rem; nhịp điệu nhất quán trong thang đo giống Tailwind.
Khi nào nên chuyển px sang rem
• Khi bạn triển khai các thông số Figma trong CSS đáp ứng với tính năng thu phóng có thể truy cập.
• Khi bạn căn chỉnh với mã thông báo hệ thống thiết kế được xác định trong rem.
• Khi người dùng ghi đè kích thước phông chữ mặc định của trình duyệt — bố cục rem sẽ thích ứng.
Khi nào nên chọn công cụ khác
• Khi bạn cần em liên quan đến phông chữ thành phần lồng nhau — sử dụng pixel để em.
• Khi bạn cần đơn vị khung nhìn (vw/vh) cho bố cục toàn màn hình.
• Khi bạn khớp pixel thiết bị 1:1 trên viền retina — viền 1 px thường ở dạng px.
rem so với em trong CSS thành phần
em kết hợp bên trong các phần tử lồng nhau với các kích thước phông chữ khác nhau — phần đệm trong em phát triển cùng với văn bản cục bộ. rem vẫn được gắn với root, tạo ra khoảng cách có thể dự đoán được giữa các thành phần. Nhiều nhóm sử dụng rem cho tỷ lệ bố cục và em chỉ để điều chỉnh khoảng cách chữ cái hoặc vi mô gắn với loại cục bộ.
Quy trình chuyển giao thiết kế
Các nhà thiết kế xuất px từ Figma; các nhà phát triển chia theo gốc đã thống nhất (tài liệu ở dạng README). Khi dự án sử dụng thủ thuật 62,5%, hãy xác nhận trước khi chuyển đổi — các giả định kết hợp sẽ tăng gấp đôi hoặc giảm một nửa giao diện người dùng.
Câu hỏi thường gặp
rem là gì?
rem = "root em". 1 rem bằng kích thước phông chữ của phần tử html chứ không phải phần tử gốc.
Tại sao không sử dụng px ở mọi nơi?
Đã sửa lỗi px bỏ qua tùy chọn phông chữ của người dùng. rem tôn trọng tỷ lệ gốc cho khả năng truy cập (WCAG).
Kích thước phông chữ gốc mặc định?
Hầu hết các trình duyệt mặc định là 16 px trên html. Người dùng có thể thay đổi điều này trong cài đặt.
Công thức?
rem = px `rootFontSizePx. Ví dụ: 20 px `16 = 1,25 rem.
Rem có hoạt động với lề và phần đệm không?
Có — rem áp dụng cho mọi thuộc tính độ dài CSS, không chỉ kích thước phông chữ.
Dữ liệu có được tải lên không?
Không. Quá trình chuyển đổi diễn ra cục bộ.