Cách sử dụng
- Đặt cỡ chữ gốc nếu trang web của bạn thay đổi cỡ chữ này (ví dụ, html { font-size: 62.5% } đặt cỡ chữ thành 10px).
- Nhập giá trị vào một trong hai ô để chuyển đổi px sang rem hoặc rem sang px. Chuyển sang em nếu bạn muốn lấy cỡ chữ của phần tử cha làm căn cứ.
- Tra cứu nhanh bằng bảng hoặc dán đoạn CSS để chuyển đổi tất cả độ dài px cùng lúc rồi sao chép kết quả.
Cách hoạt động
rem = px ÷ cỡ chữ gốc. Với cỡ chữ gốc mặc định là 16px, 24px bằng 1.5rem và 14px bằng 0.875rem. em dùng cùng công thức nhưng dựa trên cỡ chữ của phần tử cha, vì vậy các giá trị em lồng nhau sẽ nhân dồn. rem tránh được điều này vì luôn tham chiếu đến phần tử gốc.
Dùng rem cho cỡ chữ và khoảng cách giúp văn bản phóng to khi người dùng tăng cỡ chữ mặc định trong cài đặt trình duyệt, hỗ trợ người có thị lực kém. Các giá trị được làm tròn đến bốn chữ số thập phân.
Công cụ chuyển đổi đoạn mã thay đổi các số đứng trước px. Công cụ giữ nguyên chú thích, url(…) và chuỗi đặt trong dấu nháy; giữ nguyên 1px nếu bạn chọn (viền mảnh thường nên để 1px); chuyển 0px thành 0; và mặc định không thay đổi các điều kiện @media và @container, vì trong media query, rem và em luôn tham chiếu đến cỡ chữ ban đầu của trình duyệt, bất kể cỡ chữ gốc bạn thiết lập. Công cụ không xử lý ngữ nghĩa của calc() ngoài việc thay thế các số px bên trong. Cách này vẫn chính xác vì từng độ dài được chuyển đổi riêng.
Ví dụ
Cỡ chữ gốc mặc định
Với cỡ chữ gốc 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
Mẹo 62.5%
Nếu CSS của bạn đặt html { font-size: 62.5% }, cỡ chữ gốc là 10px, nên 14px = 1.4rem và 24px = 2.4rem. Đặt trường cỡ chữ gốc thành 10 để khớp.
Chuyển đổi một thành phần
padding: 24px 16px; border: 1px solid #ddd; sẽ thành padding: 1.5rem 1rem; border: 1px solid #ddd; khi bật “Giữ nguyên giá trị 1px”.
Câu hỏi thường gặp
Nên dùng rem hay em?
Dùng rem cho hầu hết cỡ chữ, khoảng cách và bố cục vì đơn vị này cho kết quả nhất quán ở mọi nơi. Dùng em khi cần phần tử co giãn theo cỡ chữ của chính nó, chẳng hạn như phần đệm bên trong nút.
Vì sao không chuyển media query sang rem?
Bạn có thể dùng rem, nhưng trong media query, 1rem luôn bằng cỡ chữ mặc định của trình duyệt (thường là 16px), chứ không phải cỡ chữ html của bạn. Vì vậy, theo mặc định, công cụ sẽ bỏ qua các giá trị này. Tắt tùy chọn nếu bạn vẫn muốn chia cho 16.
rem có tốt hơn px về khả năng truy cập không?
Có, đối với cỡ chữ: rem tuân theo cài đặt cỡ chữ mặc định của người dùng, còn cỡ chữ px thì không. Tính năng thu phóng của trình duyệt hoạt động với cả hai đơn vị.
Quyền riêng tư
Các phép chuyển đổi và đoạn CSS được xử lý ngay trong trình duyệt của bạn và không bao giờ được gửi đi nơi khác.