Công cụ chuyển đổi Pixel sang EM/REM
Chuyển đổi px, rem, em, pt và % với bảng trực tiếp và CSS sẵn sàng sao chép
rem tương đối với cỡ chữ gốc; em và % tương đối với phần tử cha.
| PX | REM | EM | PT |
|---|---|---|---|
| 10 | — | — | — |
| 12 | — | — | — |
| 14 | — | — | — |
| 16 | — | — | — |
| 18 | — | — | — |
| 20 | — | — | — |
| 24 | — | — | — |
| 28 | — | — | — |
| 32 | — | — | — |
| 40 | — | — | — |
| 48 | — | — | — |
| 64 | — | — | — |
Giới thiệu về Công cụ chuyển đổi Pixel sang EM/REM
Công cụ chuyển đổi pixel sang EM/REM chuyển đổi các giá trị độ dài CSS giữa px, rem, em, pt và phần trăm. Nhập một giá trị theo bất kỳ đơn vị nào trong năm đơn vị và một bảng trực tiếp hiển thị giá trị tương đương ở tất cả các đơn vị còn lại — cùng đoạn mã CSS sẵn sàng sao chép để dán thẳng vào một stylesheet.
Các phép chuyển đổi tuân theo cách CSS thực sự phân giải đơn vị: rem tương đối với cỡ chữ gốc, còn em và % tương đối với cỡ chữ của phần tử cha. Cả hai kích thước tham chiếu đều có thể chỉnh sửa, nên bạn có thể mô phỏng một gốc 16 px với một thành phần 14 px, hoặc bất kỳ tỷ lệ hệ thống thiết kế nào bạn dùng.
Một bảng giá trị thông dụng liệt kê các kích thước mà nhà thiết kế thường dùng nhất — nên các câu hỏi như "24px bằng bao nhiêu rem" được trả lời chỉ trong nháy mắt. Công cụ này miễn phí, cập nhật khi bạn gõ và là công cụ quen thuộc để chuyển đổi các bản thiết kế pixel cố định thành CSS dựa trên rem, dễ tiếp cận và có thể co giãn.
Cách sử dụng Công cụ chuyển đổi Pixel sang EM/REM
- Nhập giá trị cần chuyển đổi và chọn đơn vị của nó: px, rem, em, pt hoặc %.
- Điều chỉnh cỡ chữ gốc (cho rem) và cỡ chữ phần tử cha (cho em và %) nếu chúng khác 16 px.
- Đọc các giá trị đã chuyển đổi trong bảng trực tiếp.
- Sao chép đoạn mã CSS được tạo ra hoặc bất kỳ giá trị nào từ bảng giá trị thông dụng.