Đổi px sang rem, em, pt, pica, inch và mm theo cỡ chữ của phần tử gốc, phần tử cha và DPI. CSS quy định 1 in = 96 px = 72 pt.
Tác giả: AdminBản nháp soạn bằng công cụ viết dùng AICập nhật Ví dụ đã kiểm tra: 7
24px là 1.5rem với cỡ chữ gốc 16 px và 96 pixel mỗi inch.
| Đơn vị | Giá trị | Định nghĩa |
|---|---|---|
| Pixel (px) | 24px | 1 px |
| Point (pt) | 18pt | 1 pt = 1/72 in |
| Pica (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| Inch (in) | 0.25in | 1 in = DPI px |
| Xentimét (cm) | 0.635cm | 1 cm = 1/2.54 in |
| Milimét (mm) | 6.35mm | 1 mm = 1/25.4 in |
| Một phần tư milimét (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (cỡ chữ phần tử cha) | 1.5em | 1 em = parent font size |
| rem (cỡ chữ phần tử gốc) | 1.5rem | 1 rem = root font size |
| Phần trăm cỡ chữ phần tử cha (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS đổi độ dài qua pixel. Đơn vị tuyệt đối cố định: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q là một phần tư milimét. Đơn vị theo chữ phụ thuộc trang: 1 rem là cỡ gốc; trên font-size, 1 em (hay 100%) là cỡ cha. Đổi sang pixel rồi chia pixel mỗi đơn vị đích.
Lập trình viên giao diện đổi px thiết kế sang rem để theo cỡ chữ trình duyệt: gốc 16 px mặc định thì 24 px là 1.5 rem. Thiết kế in dùng ô pixel mỗi inch; ở 300 DPI, logo 10 mm cần khoảng 118 pixel. Để chữ theo tùy chọn người đọc, cỡ chữ gốc cũng phải tôn trọng tùy chọn đó.
Inch CSS không nhất thiết bằng inch đo trên màn hình. CSS định nghĩa 96 px mỗi inch; góc nhìn pixel tham chiếu khoảng 0.0213°. Cách triển khai có thể neo đơn vị tuyệt đối vào phép đo vật lý hoặc pixel; ánh xạ thiết bị, khoảng nhìn và tỷ lệ in quyết định có khớp thước hay không.
Trong công thức xₛ, xₜ là giá trị nguồn, đích; pₛ, pₜ là pixel mỗi đơn vị nguồn, đích. Hệ số dùng cỡ chữ và mật độ đã nhập.
Nhập giá trị, hai đơn vị và kích thước phông gốc, phông cha. Khi gốc là 16 px, 24 px = 1.5 rem; khi gốc là 20 px, 24 px = 1.2 rem. Vì vậy cùng giá trị px có thể thành giá trị rem khác nếu đổi ngữ cảnh.
| Giá trị | Đơn vị gốc | Đơn vị đích | Điều kiện tính | Giá trị sau đổi |
|---|---|---|---|---|
| 24 | px | rem | Gốc 16 px | 1.5 |
| 24 | px | rem | Gốc 20 px | 1.2 |
| 12 | pt | px | 96 pixel/in | 16 |
| 1 | pc | pt | 96 pixel/in | 12 |
| 100 | % | em | Phông cha 16 px | 1 |
| 10 | mm | px | 300 pixel/in | 118.110236 |
Quan hệ CSS là 1 in = 96 px = 72 pt. Chế độ mật độ khác đếm pixel vật lý tại mật độ đó: 10 mm × 300 ÷ 25.4 ≈ 118.110236 px. Điều này không thay đổi quan hệ CSS trong trình duyệt và không tự đo kích thước thật trên màn hình.
Ở đây em và % theo phông cha trong ngữ cảnh font-size, còn rem theo phông gốc. Thuộc tính khác có thể dùng cơ sở phần trăm khác; em cũng phụ thuộc nơi sử dụng. Không suy ra chiều dài thực chỉ từ mức thu phóng hay tỉ lệ pixel của thiết bị.
Nguồn đối chiếu: Kiểm tra ví dụ: CSS Values 3 §6.1: 1rem = cỡ chữ gốc (16 px mặc định của trình duyệt); 24 / 16 = 1.5
Nguồn đối chiếu: Kiểm tra ví dụ: CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
Nguồn đối chiếu: Kiểm tra ví dụ: CSS Values 3 §6.2: 1in = 96px
Nguồn đối chiếu: Kiểm tra ví dụ: 1 rem = cỡ chữ gốc (16 px); 1.5 × 16
Mặc định 16 pixel. Một rem bằng cỡ chữ html gốc; trình duyệt chính đặt 16 px nếu người đọc hay html { font-size } không đổi. Với mặc định này, html { font-size: 62.5% } cho 1 rem = 10 px. W3C CSS Values and Units định nghĩa rem; 16 px là mặc định trình duyệt, không thuộc định nghĩa.
Nhân pixel với 0.75; từ point sang pixel nhân 4/3 (khoảng 1.333). Theo W3C CSS 1 in = 96 px = 72 pt nên 1 px = 72/96 pt. Chữ 16 px là 12 pt; văn bản 11 pt khoảng 14.67 px.
rem luôn theo cỡ gốc; em theo phần tử hiện tại, hoặc phần tử cha khi đặt font-size. em tích lũy khi lồng: danh sách 1.2em trong danh sách 1.2em có chữ gấp 1.44 cỡ chữ cơ sở trước khi áp dụng hai mức danh sách. Với gốc 16 px, 1.2rem luôn 19.2 px dù lồng sâu.
Dùng rem khi chữ cần theo cài đặt cỡ chữ trình duyệt, đồng thời để cỡ gốc tôn trọng cài đặt đó. Thu phóng trang phóng cả px và rem; rem, em, phần trăm có thể theo tùy chọn qua ngữ cảnh gốc hoặc cha. WCAG 2.1 tiêu chí 1.4.4 (AA) yêu cầu phóng chữ đến 200% không mất nội dung hay chức năng. px có thể đáp ứng qua zoom; rem cũng theo tùy chọn nếu ngữ cảnh gốc cho phép.
Inch CSS không nhất thiết bằng inch đo trên màn hình. CSS định nghĩa 1 in = 96 px; pixel tham chiếu W3C là một pixel trên màn hình 96 DPI nhìn từ 28 in, góc nhìn khoảng 0.0213°. Ánh xạ thiết bị và khoảng nhìn thay đổi, nên khung 96 px trên điện thoại có thể nhỏ hơn inch thực. Khi in đúng kích thước, 1 in tương ứng 25.4 mm; tỷ lệ in và hiệu chuẩn vẫn ảnh hưởng kích thước thực.
Công cụ tính này có 7 ví dụ đã giải với đáp án từ các nguồn độc lập. Chúng được chạy trong bộ kiểm thử và bạn cũng có thể chạy tại đây.