Đổi pixel (px) sang rem

Nội dung được kiểm tra lần cuối:

24 px bằng 1,5 rem ở cỡ chữ gốc mặc định 16 px, còn 14 px bằng 0,875 rem. Phép tính chỉ là một phép chia: kích thước bằng pixel chia cho cỡ chữ gốc. Hãy nhập kích thước từ bản thiết kế vào ô đầu tiên, và nếu trang của bạn dùng cỡ chữ gốc khác, hãy ghi nó vào ô font-size gốc.

px
rem
sang

rem là gì và vì sao kích thước bằng pixel được ghi bằng rem?

Bản thiết kế cho kích thước bằng pixel: tiêu đề 28 px, khoảng cách giữa hai phần 32 px. Pixel trong CSS là đơn vị cố định, được tiêu chuẩn định nghĩa bằng 1/96 inch[1]. Vì vậy công cụ đổi px sang inch tính 96 pixel cho một inch ở độ phân giải mặc định. rem là đơn vị tương đối: một rem bằng cỡ chữ đã tính của phần tử html, phần tử gốc của trang[1].

Vì rem luôn được tính từ phần tử gốc, giá trị của nó không cộng dồn trong các phần tử lồng nhau như em, đơn vị mà công cụ đổi em sang px xử lý. Để đổi bất kỳ kích thước nào từ pixel sang rem, bạn chỉ cần biết cỡ chữ của phần tử html. Sau khi đổi, kích thước đi theo cài đặt của người đọc: tiêu đề 24 px vẫn là 24 px ở cài đặt mặc định và thành 30 px với người đọc đã chọn Lớn trong Chrome hoặc Cỡ phông lớn trong Edge.

Mã CSS có quy tắc .hero với cỡ chữ 60px và quy tắc tiêu đề với cỡ chữ 220px
Cả hai cỡ chữ trong ảnh đều ghi bằng pixel: 60px ở quy tắc .hero và 220px ở quy tắc gộp hai lớp .heading và .sub-heading. Ở cỡ chữ gốc 16 px, giá trị đầu thành 3.75rem, giá trị sau thành 13.75rem, rồi cả hai to lên theo cài đặt của người đọc. Ảnh: Ferenc Almasi, Unsplash.

24 px bằng bao nhiêu rem?

24 px bằng 1,5 rem ở cỡ chữ gốc mặc định 16 px. Công thức chỉ có một phép chia: rem = px ÷ cỡ chữ gốc. Cứ 16 px là 1 rem, và một pixel bằng 0,0625 rem. Theo đó, 8 px bằng 0,5 rem. Còn 32 px bằng 2 rem.

Nếu stylesheet dùng cỡ chữ gốc khác, hãy chia cho cỡ chữ gốc ấy. Với kỹ thuật 62,5%, cỡ chữ gốc thành 10 px và 24 px bằng 2,4 rem. Ở cỡ chữ gốc 20 px, 24 px bằng 1,2 rem. Hãy ghi cỡ chữ gốc vào ô thứ ba, và công cụ sẽ cho giá trị để bạn ghi vào stylesheet.

Một số kích thước không chia hết cho 16, vì vậy kết quả hiện với tối đa bốn chữ số thập phân. Ví dụ, 13 px bằng 0,8125 rem, và CSS nhận con số này nguyên như vậy. Ô kết quả hiện dấu phẩy, còn nút Sao chép kết quả sao chép 0.8125 với dấu chấm, nên bạn có thể dán ngay và viết thêm chữ rem phía sau.

Công thức đổi pixel sang rem ra sao?

Công thức là rem = px ÷ font-size, trong đó font-size là cỡ chữ của phần tử html. Lấy một tiêu đề 28 px từ bản thiết kế. Ở cỡ chữ gốc 16 px, ta có 28 ÷ 16 = 1,75, nên trong stylesheet bạn ghi font-size: 1.75rem.

Những kích thước chia hết cho 4 cho giá trị có tối đa hai chữ số thập phân, ví dụ 12 px bằng 0,75 rem. Các kích thước chẵn còn lại cho ba chữ số thập phân, như 14 px bằng 0,875 rem, còn kích thước lẻ cho bốn chữ số, như 15 px bằng 0,9375 rem. Kích thước như 13,5 px có thêm chữ số thập phân thứ năm, nên kết quả được làm tròn còn bốn chữ số: 0,8438 rem.

Với chiều ngược lại, hãy dùng công cụ đổi rem sang px. Nếu bạn cần giá trị tương đối theo cỡ chữ của phần tử cha, hãy đổi kích thước bằng công cụ đổi px sang em. Nếu kích thước trong tệp ghi bằng point (pt), hãy đổi sang pixel trước bằng công cụ đổi pt sang px.

Mã CSS đã rút gọn với các kích thước bằng pixel như font-size:13px và margin:16px 0 20px
Đây là một stylesheet đã rút gọn, trong đó mọi kích thước nhìn thấy đều ghi bằng pixel. Ở cỡ chữ gốc 16 px, font-size:13px thành 0.8125rem. Còn margin:16px 0 20px thành 1rem 0 1.25rem. Ảnh: Rahul Mishra, Unsplash.

Bảng đổi px sang rem ở ba cỡ chữ gốc

Bảng gồm các kích thước từ 1 đến 400 px. Cột thứ nhất dành cho cỡ chữ gốc mặc định 16 px, cột thứ hai cho kỹ thuật 62,5% làm cỡ chữ gốc thành 10 px, và cột thứ ba cho cỡ chữ gốc 20 px của người đọc đã chọn Lớn trong Chrome. Các hàng được làm nổi bật là 16 px và 24 px.
Kích thước bằng pixelrem ở cỡ chữ gốc 16 pxrem ở cỡ chữ gốc 10 pxrem ở cỡ chữ gốc 20 px
1 px0,0625 rem0,1 rem0,05 rem
2 px0,125 rem0,2 rem0,1 rem
4 px0,25 rem0,4 rem0,2 rem
6 px0,375 rem0,6 rem0,3 rem
8 px0,5 rem0,8 rem0,4 rem
10 px0,625 rem1 rem0,5 rem
11 px0,6875 rem1,1 rem0,55 rem
12 px0,75 rem1,2 rem0,6 rem
13 px0,8125 rem1,3 rem0,65 rem
14 px0,875 rem1,4 rem0,7 rem
15 px0,9375 rem1,5 rem0,75 rem
16 px1 rem1,6 rem0,8 rem
17 px1,0625 rem1,7 rem0,85 rem
18 px1,125 rem1,8 rem0,9 rem
20 px1,25 rem2 rem1 rem
22 px1,375 rem2,2 rem1,1 rem
24 px1,5 rem2,4 rem1,2 rem
25 px1,5625 rem2,5 rem1,25 rem
26 px1,625 rem2,6 rem1,3 rem
28 px1,75 rem2,8 rem1,4 rem
30 px1,875 rem3 rem1,5 rem
32 px2 rem3,2 rem1,6 rem
36 px2,25 rem3,6 rem1,8 rem
40 px2,5 rem4 rem2 rem
44 px2,75 rem4,4 rem2,2 rem
48 px3 rem4,8 rem2,4 rem
50 px3,125 rem5 rem2,5 rem
56 px3,5 rem5,6 rem2,8 rem
60 px3,75 rem6 rem3 rem
64 px4 rem6,4 rem3,2 rem
72 px4,5 rem7,2 rem3,6 rem
80 px5 rem8 rem4 rem
96 px6 rem9,6 rem4,8 rem
100 px6,25 rem10 rem5 rem
120 px7,5 rem12 rem6 rem
128 px8 rem12,8 rem6,4 rem
160 px10 rem16 rem8 rem
192 px12 rem19,2 rem9,6 rem
200 px12,5 rem20 rem10 rem
256 px16 rem25,6 rem12,8 rem
320 px20 rem32 rem16 rem
400 px25 rem40 rem20 rem
Công cụ tính mọi ô bằng cách chia kích thước bằng pixel cho cỡ chữ gốc và ghi với tối đa bốn chữ số thập phân, giống ô kết quả.

Các dòng trong stylesheet được ghi bằng rem như thế nào?

Mỗi dòng được ghi bằng pixel như khi lấy từ bản thiết kế, và bên cạnh là cùng giá trị bằng rem ở cỡ chữ gốc 16 px và ở cỡ chữ gốc 10 px của kỹ thuật 62,5%. Các cột giá trị là mã CSS, nên phần thập phân ghi bằng dấu chấm.
Dòng bằng pixelrem ở cỡ chữ gốc 16 pxrem ở cỡ chữ gốc 10 px (62,5%)
font-size: 16px1rem1.6rem
font-size: 14px0.875rem1.4rem
font-size: 28px1.75rem2.8rem
padding: 12px 24px0.75rem 1.5rem1.2rem 2.4rem
margin-bottom: 32px2rem3.2rem
border-radius: 8px0.5rem0.8rem
max-width: 1200px75rem120rem
@media (min-width: 768px)48rem48rem
Ở dòng cuối, giá trị vẫn là 48rem ở cả hai cột. rem trong media query được tính từ giá trị ban đầu của cỡ chữ, và quy tắc ghi cho phần tử html không ảnh hưởng đến nó[2]. Chúng tôi đã đo điều này trên Chrome và Firefox với một trang dùng kỹ thuật 62,5%: quy tắc @media (min-width: 48rem) bắt đầu có hiệu lực ở chiều rộng 768 px. Khi chúng tôi tăng cỡ chữ của trình duyệt lên 20 px, quy tắc đó bắt đầu có hiệu lực ở chiều rộng 960 px.

Công cụ đổi px sang rem nhận và tính những cách ghi nào?

Mỗi ô nhận và tính mọi cách ghi trong phần dành cho ô đó ở bảng này, nên bạn không cần sửa kích thước trước khi dán. Hãy dán nguyên như khi sao chép từ bản thiết kế hoặc stylesheet, có hay không có đơn vị đều được. Cột giữa là kết quả do chính công cụ tính ở cỡ chữ gốc 16 px.
Bạn gõ hoặc dánKết quả công cụ tínhĐiều xảy ra với cách ghi này
Ô thứ nhất: kích thước bằng pixel, cỡ chữ gốc 16 px
241,5 remChỉ có con số, như kích thước hiện trong bảng đo của phần mềm thiết kế.
24px1,5 remĐơn vị dính liền với con số: công cụ đọc con số và bỏ qua px.
24 điểm ảnh1,5 remĐơn vị viết bằng tiếng Việt sau dấu cách: công cụ lấy con số và bỏ qua chữ.
13,50,8438 remKích thước có dấu phẩy thập phân: kết quả hiện bốn chữ số thập phân sau khi làm tròn.
1 20075 remKhoảng trắng giữa các nhóm hàng nghìn được bỏ qua, nên ô tính 1 200 pixel. Nếu bạn gõ số này với dấu chấm thay cho khoảng trắng, ô sẽ đọc là 1,2 vì một dấu chấm đơn lẻ luôn là dấu thập phân, và bên dưới ô sẽ hiện một dòng nhắc.
1,2000,075 remTrên trang này dấu phẩy được đọc là dấu thập phân kể cả khi sau nó có ba chữ số, nên kích thước là 1,2 px và bên dưới ô sẽ hiện một dòng nhắc. Nếu muốn một nghìn hai trăm, hãy ghi 1200 hoặc 1 200.
1200px75 remChiều rộng khung chứa kèm đơn vị và không có dấu phân cách hàng nghìn: bằng 75 rem.
padding: 20px;1,25 remNguyên một dòng từ stylesheet: công cụ lấy con số và bỏ qua tên thuộc tính cùng dấu chấm phẩy.
−8px-0,5 remDấu trừ kiểu chữ in “−” trước con số được đọc là dấu âm, như ở một lề âm.
Ô “font-size gốc”: công cụ tính cỡ chữ gốc
62,5%10 pxPhần trăm như cách bạn ghi cho phần tử html: 62,5% của cỡ chữ gốc mặc định 16 px là 10.
font-size: 18px18 pxDòng sao chép từ stylesheet: công cụ lấy 18 làm cỡ chữ gốc.
Chúng tôi đã thử từng cách ghi trong chính ô nhập trước khi đưa vào đây. Nếu dưới ô hiện yêu cầu nhập một số duy nhất, hãy chỉ giữ lại kích thước trong ô.

Làm sao đổi kích thước từ Figma hoặc cả stylesheet từ px sang rem?

Với vài kích thước, công cụ này là đủ. Khi có nhiều kích thước, phần mềm thiết kế và công cụ build có thể tự tính rem.

  1. Kích thước từ tệp thiết kế

    Sao chép kích thước bằng pixel từ bảng đo rồi dán vào ô đầu tiên. Nếu trang đặt cỡ chữ cho phần tử html, hãy ghi cỡ chữ đó vào ô font-size gốc trước khi sao chép kết quả.

  2. Dev Mode trong Figma

    Ở các gói trả phí, Dev Mode hiển thị kích thước trực tiếp bằng rem. Tên gọi ở đây bằng tiếng Anh, đúng như giao diện của Figma. Trong phần Code của bảng Inspect, bấm Inspect settings cạnh menu ngôn ngữ rồi chọn đơn vị rem. Để đổi cỡ chữ gốc, chọn Set unit scale… ở cùng chỗ đó và nhập cỡ chữ gốc trong cửa sổ Unit scale.

  3. Hàm trong Sass

    Sass chia số bằng hàm math.div() trong mô-đun sass:math[3]. Hàm @function rem($px) { @return math.div($px, 16px) * 1rem; } làm cho rem(24px) bằng 1.5rem.

  4. PostCSS cho cả stylesheet

    Plugin postcss-pxtorem đổi px sang rem trong tệp CSS khi build[4]. Cỡ chữ gốc mặc định của nó là 16, và với cài đặt mặc định nó chỉ đổi các thuộc tính về chữ: font, font-size, line-height và letter-spacing. Media query vẫn giữ bằng pixel.

Chuyển đổi Pixel sang đơn vị khác

Đổi px sang ptĐổi px sang cmĐổi px sang mmĐổi px sang inchĐổi px sang mét

Nguồn tham khảo

  1. CSS Values and Units Module Level 4 — W3C
  2. Media Queries Level 4 — W3C
  3. sass:math — Sass
  4. postcss-pxtorem — GitHub
  5. <length> CSS type — MDN Web Docs
  6. Web Content Accessibility Guidelines (WCAG) 2.2 — W3C

Mọi giá trị trong bảng đều được chúng tôi tính từ định nghĩa của các đơn vị và kiểm tra lại bằng phép tính trước khi đăng. Dữ liệu lịch sử và tên các đơn vị địa phương dựa trên các nguồn nêu ở trên.

Nội dung được kiểm tra lần cuối: · biên soạn và kiểm tra bởi đội ngũ Arteon

Câu hỏi thường gặp về việc đổi px sang rem

16 px bằng bao nhiêu rem?

16 px bằng 1 rem ở cỡ chữ gốc mặc định 16 px. Với kỹ thuật 62,5%, tức ở cỡ chữ gốc 10 px, 16 px bằng 1,6 rem.

14 px và 12 px bằng bao nhiêu rem?

Ở cỡ chữ gốc 16 px, 14 px bằng 0,875 rem và 12 px bằng 0,75 rem.

24 px có luôn bằng 1,5 rem không?

Điều này chỉ đúng ở cỡ chữ gốc 16 px. Nếu trang đặt cỡ chữ khác cho phần tử html, hãy chia cho cỡ chữ đó: ở cỡ chữ gốc 10 px, 24 px bằng 2,4 rem, còn ở cỡ chữ gốc 20 px là 1,2 rem.

Vì sao lại chia cho 16?

Vì 16 px là cỡ chữ mặc định phổ biến của trình duyệt, và người dùng có thể tự đổi trong phần cài đặt[5]. Trong lần đo của chúng tôi, Chrome, Edge và Firefox đều dùng cỡ chữ này trước khi cài đặt bị thay đổi.

Kỹ thuật 62,5% có làm thay đổi giá trị rem trong media query không?

Không. Quy tắc @media (min-width: 48rem) bắt đầu có hiệu lực ở 768 px dù có dùng kỹ thuật đó hay không, vì rem trong media query được tính từ giá trị ban đầu của cỡ chữ[2]. Vì vậy hãy đổi các ngưỡng media query bằng cách chia cho 16.

Đổi px sang rem và đổi px sang em khác nhau thế nào?

rem được tính từ cỡ chữ của phần tử html, nên bạn chia cho cùng một cỡ chữ gốc trên cả trang. em được tính từ cỡ chữ của phần tử cha, nên bạn chia cho cỡ chữ của phần tử cha. Để tính như vậy, hãy dùng công cụ đổi px sang em.

Có nên ghi đường viền 1px bằng rem không?

Nếu muốn đường viền luôn dày một pixel ở mọi cài đặt, hãy giữ 1px. Nếu ghi là 0.0625rem, với người đọc chọn cỡ chữ gốc 20 thì đường viền dày 1,25 px. Plugin postcss-pxtorem cũng giữ thuộc tính border bằng pixel ở cài đặt mặc định[4].

Chữ ghi bằng rem có to lên theo cài đặt của người đọc không?

Có. Chữ ghi bằng rem to lên theo cỡ chữ mà người đọc chọn trong trình duyệt, còn chữ ghi bằng pixel giữ nguyên. Tiêu chí 1.4.4 Resize Text trong WCAG nói về điều này: văn bản có thể phóng to đến 200% mà không mất nội dung hay chức năng[6].

Ảnh chụp màn hình công cụ miễn phí của Arteon: Đổi pixel (px) sang rem

Giúp chúng tôi cải thiện công cụ

Bạn thấy một kích thước cho kết quả khác trong trình duyệt của mình, hay có ý tưởng cho công cụ này? Hãy viết cho chúng tôi.