Chuyển đổi đơn vị CSS

Cách sử dụng

1. Đặt lại cỡ chữ gốc nếu trang của bạn không dùng mặc định 16px của trình duyệt.
2. Gõ một giá trị để thấy nó ở mọi đơn vị, hoặc chuyển sang chế độ cả tệp CSS.
3. Dán CSS, chọn rem hoặc em, và mọi giá trị px trên ngưỡng sẽ được đổi lại.
4. Sao chép kết quả, hoặc tải về thành tệp.

Tính năng

• Xử lý đúng cả hai đơn vị tương đối: rem theo cỡ chữ gốc, còn em và % theo cỡ chữ của phần tử cha.
• Đổi cả tệp bằng bộ quét cú pháp, nên px nằm trong chú thích, trong chuỗi hay trong một tên như --gap-2px đều được để yên.
• Mặc định giữ nguyên các giá trị mảnh bằng px, vì viền 1px đổi sang rem sẽ không còn đúng một điểm ảnh thiết bị.
• Xử lý được giá trị âm và số thập phân, và dừng ở năm chữ số sau dấu phẩy thay vì in ra sai số của số thực.
• Với một giá trị lẻ, hiện luôn mọi đơn vị, mỗi dòng đều sẵn sàng để sao chép.

Câu hỏi thường gặp

Vì sao nên đổi px sang rem?

Vì người đọc chỉnh cỡ chữ mặc định lớn hơn trong trình duyệt sẽ chẳng được gì từ một bố cục viết bằng pixel — chữ vẫn nhỏ y như cũ. Kích thước viết bằng rem thì co giãn theo thiết lập đó. Đây là cải thiện khả năng tiếp cận rẻ nhất mà CSS có.

Có nên đổi cả giá trị trong media query không?

Chuyện này còn tranh cãi thật sự. Điểm ngắt viết bằng rem sẽ phản ứng theo cỡ chữ của người đọc, điều mà một số người thiết kế muốn còn số khác thấy khó lường, và Safari trong quá khứ từng xử lý em trong media query không nhất quán. Công cụ này đổi chúng như mọi giá trị khác; nếu bạn không muốn vậy, hãy nâng ngưỡng giữ nguyên lên trên các điểm ngắt hoặc xử lý riêng những khối đó.

rem và em ở đây khác nhau thế nào?

rem đo theo cỡ chữ gốc và giống nhau ở mọi nơi trong tài liệu. em đo theo cỡ chữ của chính phần tử đang viết, nên cùng một số em lại ra số pixel khác nhau ở những chỗ khác nhau — đó là lý do công cụ hỏi cả hai cỡ chữ chứ không mặc định chúng bằng nhau.

1pt đúng bằng 1,333px thật à?

Đúng, và là theo định nghĩa chứ không phải do đo đạc. CSS định nghĩa một pixel bằng 1/96 inch và một point bằng 1/72, nên một point bằng đúng 4/3 pixel CSS bất kể màn hình nào. Đây là pixel quy chiếu, không phải pixel phần cứng — trên màn hình mật độ cao, mỗi pixel CSS được vẽ bằng vài pixel thiết bị.

Công cụ liên quan