Chuyển rem sang px Root em ↔ Pixels Miễn phí Trực tuyến An toàn

Vì sao bạn cần chuyển rem sang px

Bạn mở một bảng định kiểu và thấy padding: 2.25rem trên một thẻ và font-size: 0.8125rem trên một chú thích. Đó là những giá trị tốt, được viết đúng cách CSS hiện đại nên được viết, và thoạt nhìn chúng chẳng cho bạn biết gì. Phần đệm của thẻ đó lớn bao nhiêu trên màn hình? Chú thích có đọc được không? Nó có khớp với 36 px và 13 px trong tệp thiết kế người ta đưa cho bạn không? Để trả lời, bạn chuyển rem sang px: bạn nhân với cỡ chữ gốc và đọc đáp án bằng đơn vị mà các công cụ thiết kế dùng. Đó là chiều ngược lại của hướng thông thường, và là việc bạn làm khi đọc mã, đối chiếu bản mẫu với bản dựng hoặc giải thích một bố cục cho người nghĩ bằng pixel.

Phép chuyển đổi thì dễ; điều khiến nó đáng có một trang là cơ sở. Một rem không phải là một cỡ, nó là một bội số của một cỡ, cỡ chữ của phần tử gốc. Trong một trình duyệt chưa ai bảo khác, cỡ đó là 16 px, nên 1 rem là 16 px, 2,25 rem là 36 px và 0,8125 rem là 13 px. Nhưng bảng định kiểu có thể thay đổi phần tử gốc, và người đọc có thể thay đổi trong trình duyệt, khi đó mọi giá trị rem trong trang dịch chuyển theo. Vì vậy trang này hỏi cơ sở và dùng nó, thay vì giấu nó đi.

Phép tính diễn ra trong trình duyệt của bạn, và không có gì được tải lên. Bên dưới bạn sẽ thấy công thức, một bảng các giá trị thông dụng, điều phép chuyển đổi giữ được và không giữ được, những tình huống lập trình viên cần chuyển rem sang px và vài thói quen giúp một bảng định kiểu dùng rem dễ đọc.

Công thức và cơ sở

px bằng rem nhân với cơ sở

Công thức là một phép nhân: px = rem × cơ sở. Với cơ sở thường lệ 16 px, 1,5 rem thành 24 px, 0,75 rem thành 12 px và 4 rem thành 64 px. Trang in cơ sở bên cạnh kết quả, nên một dòng như 1,5 rem = 24 px (16 px) nêu rõ điều nó đã giả định và bạn thấy ngay nó có khớp với dự án của bạn không.

Tìm ra cơ sở của bạn

Hãy tìm trong bảng định kiểu một quy tắc trên html hoặc :root đặt font-size. Nếu không có, cơ sở là mặc định của trình duyệt, 16 px. Nếu có, chẳng hạn 62,5%, hãy lấy tỷ lệ phần trăm đó của 16: 62,5% cho 10 px. Trong công cụ dành cho nhà phát triển của trình duyệt, bạn cũng có thể chọn phần tử gốc và đọc cỡ chữ đã tính của nó, đó là con số cần gõ vào ô cơ sở.

Khi cỡ gốc co giãn

Một số trang web cho cỡ gốc lớn lên theo cửa sổ, bằng một biểu thức clamp. Khi đó 1 rem không có một giá trị pixel duy nhất: nó là 15 px trên điện thoại và 18 px trên một màn hình rộng. Trong trường hợp đó mọi phép chuyển đổi chỉ là một ảnh chụp nhanh. Hãy gõ cơ sở bạn thấy ở độ rộng bạn quan tâm, và hiểu rằng đáp án chỉ có giá trị ở độ rộng đó.

Phép chuyển đổi giữ gì và không giữ được gì

Nó giữ tỷ lệ

Một rem là bất cứ cỡ chữ gốc nào, nên một bố cục viết bằng rem giữ được hình dạng khi cỡ đó đổi. Khi bạn chuyển rem sang px, giá trị pixel chính là tỷ lệ ấy được làm cho cụ thể ở một cơ sở nhất định. Tỷ lệ giữa hai cỡ, chẳng hạn một tiêu đề 2 rem trên văn bản chính 1 rem, không đổi dù bạn chuyển đổi thế nào, và tỷ lệ đó là điều một bố cục tốt dựa vào.

Nó không thể biết cài đặt của người đọc

Con số phụ thuộc hoàn toàn vào cơ sở. Nếu người đọc đã tăng cỡ chữ mặc định trong trình duyệt, điều nhiều người làm và có quyền làm, thì 1 rem không phải 16 px với họ, và con số bạn thấy chỉ đúng với cơ sở trong ô. Hãy coi giá trị pixel là cách để hiểu thiết kế, không phải lời hứa về điều mọi khách truy cập sẽ thấy.

Làm tròn

Vì cơ sở thường là số nguyên, kết quả của phép nhân thường chính xác. 0,8125 rem chính xác là 13 px ở cơ sở 16; 0,6875 rem chính xác là 11 px. Nếu bạn nhận được một số thập phân dài, đó là dấu hiệu giá trị rem đã được tính từ một cơ sở khác với cái bạn đã gõ.

Các giá trị thông dụng

Bảng ở cuối trang

Trang có một bảng các giá trị pixel mà những con số rem thông dụng tương ứng ở cơ sở bạn đặt: 0,5 rem là 8 px, 0,625 là 10, 0,75 là 12, 0,875 là 14, 1 là 16, 1,125 là 18, 1,25 là 20, 1,5 là 24, 2 là 32, 3 là 48 và 4 là 64. Đây là những giá trị xuất hiện nhiều nhất trong khoảng cách và thang chữ, và thuộc lòng chúng khiến một bảng định kiểu đọc được ngay.

Đọc bảng định kiểu bằng pixel

Một bài tập hữu ích là lấy một bảng định kiểu bạn không viết và dịch các giá trị chính của nó sang pixel một lần, ghi kết quả vào một ghi chú. Cỡ chữ chính 1 rem, tiêu đề 1,5 và 2,25 rem, khoảng cách khung 2 rem: bằng pixel là 16, 24, 36 và 32. Nhìn như vậy, logic của thiết kế hiện ra, và bạn có thể so với tệp thiết kế mà không cần máy tính.

Cách chuyển rem sang px ở đây

Gõ giá trị rem

Nhập cỡ bằng rem vào ô đầu tiên. Số thập phân được chấp nhận, nên 0.8125 hoạt động tốt như 1.

Đặt cơ sở

Để nguyên ở 16 nếu CSS của bạn không đổi cỡ gốc. Hãy đổi nếu có. Kết quả cập nhật khi bạn gõ.

Đọc giá trị pixel

Đáp án hiện ra ngay, với cơ sở hiển thị bên cạnh, để bạn biết điều gì đã được giả định. Hãy sao chép vào ghi chú hoặc đem so với tệp thiết kế.

Những đơn vị này từ đâu ra

Pixel CSS

Khi màn hình không còn mật độ dự đoán được, một trang đo bằng điểm ảnh thật trở thành một trang co lại khi màn hình sắc nét hơn. Vì thế pixel CSS được định nghĩa lại như một độ dài tham chiếu: khoảng 1/96 inch khi nhìn ở khoảng cách đọc thoải mái. Một pixel trong bảng định kiểu do đó không phải một chấm trên màn hình của bạn mà là một đơn vị độ dài mà trình duyệt ánh xạ sang số chấm màn hình cần.

Rem

Em có trước web: trong chữ in kim loại, nó là bề rộng của một khối đúc, đặt tên theo chữ M hoa, và trong CSS nó nghĩa là cỡ chữ đang có hiệu lực, vì thế nó thay đổi khi bạn lồng các phần tử. Rem được thêm vào để thoát đúng điều đó: nó là em của phần tử gốc và không bao giờ cộng dồn. Để thấy sự khác biệt bằng con số, hãy chuyển px sang em và so với kết quả khi bạn chuyển rem sang px.

Khi nào lập trình viên chuyển rem sang px

Đối chiếu bản dựng với tệp thiết kế

Nhà thiết kế bàn giao một tệp bằng pixel; lập trình viên đã viết mã bằng rem. Để kiểm tra trang có khớp không, họ chuyển rem sang px và so các con số. Sự không khớp lộ ra ngay: 1,375 rem là 22 px, và nếu thiết kế ghi 24 thì một trong hai bên sai.

Đọc mã lạ

Khi bạn thừa hưởng một bảng định kiểu, các giá trị rem che giấu cỡ thật. Chuyển một nhúm giá trị chính cho bạn một bản đồ của thiết kế: chữ lớn bao nhiêu, lề rộng bao nhiêu, các điểm ngắt rơi ở đâu.

Viết báo cáo lỗi và tài liệu

Những người kiểm thử một trang mô tả điều họ thấy bằng pixel. Một lập trình viên nói phần đệm là 2,5 rem thì ít có nghĩa với người kiểm thử; 40 px thì có nghĩa. Việc chuyển đổi giúp hai bên hiểu nhau.

Đặt các giá trị phải chính xác theo pixel

Có những thứ phải là một số điểm ảnh thiết bị chính xác nếu không sẽ trông nhòe: một viền một pixel, một biểu tượng vẽ trên lưới 24 px. Nếu một cỡ phải rơi đúng vào lưới điểm ảnh, chuyển rem sang px cho bạn biết nó có như vậy ở cơ sở của bạn không.

Những cái bẫy khi bạn chuyển rem sang px

Quên cỡ gốc đã đổi

Nếu phần tử gốc được đặt là 62,5% hoặc một biểu thức clamp, hệ số chuẩn 16 không áp dụng. Kết quả sai theo tỷ lệ của hai cơ sở. Hãy luôn kiểm tra cơ sở trước.

Nhầm rem với em

Em tương đối so với cỡ chữ của chính phần tử, không phải phần tử gốc. Giá trị 1.5em trong một tiêu đề 24 px là 36 px, nhưng trong một đoạn văn 16 px thì là 24 px. Trang này chuyển rem, vốn không có sự mơ hồ như vậy. Với em, xem Chuyển em sang px.

Cho rằng màn hình hiển thị cùng các điểm ảnh

Một pixel CSS không phải một điểm ảnh thiết bị. Trên màn hình mật độ cao, một pixel CSS có thể là hai hoặc ba điểm ảnh thiết bị. Phép chuyển đổi cho ra pixel CSS, thứ mà cả công cụ thiết kế lẫn bảng định kiểu đều dùng.

Làm tròn quá sớm

Nếu bạn làm tròn 13,333 px thành 13 rồi chuyển ngược lại, bạn nhận được 0,8125 rem, không phải 0,8333 bạn bắt đầu. Hãy giữ giá trị rem gốc khi điều đó quan trọng.

Những câu hỏi mọi người hay hỏi trước khi chuyển đổi

1 rem là bao nhiêu pixel?

Mười sáu, trong một trình duyệt mà mặc định chưa bị đổi.

2 rem là bao nhiêu pixel?

Ba mươi hai ở cơ sở mặc định. Ở cơ sở 10 nó sẽ là 20.

Vì sao trình duyệt của tôi hiển thị khác?

Cài đặt của người đọc hoặc một quy tắc trong bảng định kiểu đã đổi cỡ gốc. Hãy xem cỡ chữ đã tính của phần tử gốc trong công cụ dành cho nhà phát triển.

Rem có giống em không?

Không. Rem nói đến phần tử gốc còn em nói đến chính phần tử đó.

Con số của tôi có được tải lên không?

Không. Phép tính chạy trong trình duyệt của bạn và không có gì được gửi đi đâu cả.

Làm sao để quay lại?

Bằng Chuyển px sang rem, thực hiện phép chia thay vì phép nhân.

Những thói quen giúp bảng định kiểu rem dễ đọc

Ghi giá trị pixel trong chú thích

Một dòng như gap: 1.5rem; /* 24px */ tốn vài ký tự và giúp người đọc sau khỏi phải chuyển đổi. Nó cũng ghi lại cơ sở bạn đã giả định.

Dùng một thang nhỏ

Một dự án chỉ dùng một nhúm giá trị rem, chẳng hạn 0,5; 1; 1,5; 2 và 3, thì dễ học: sau một ngày bạn biết chúng bằng pixel mà không cần nghĩ. Khi bạn chuyển rem sang px cho một bảng định kiểu như vậy, bạn chỉ đang xác nhận điều bạn nhớ.

Đặt tên cho các giá trị

Với thuộc tính tùy chỉnh, chẳng hạn --space-md: 1.5rem, bảng định kiểu mô tả ý định thay vì con số. Cái tên mang ý nghĩa, còn con số nằm ở một chỗ duy nhất.

Thử với một cỡ mặc định khác

Hãy tăng cỡ chữ mặc định trong trình duyệt của bạn và nhìn trang. Nếu nó vẫn gắn kết, bố cục thật sự được xây bằng rem. Nếu nó vỡ, có thứ gì đó đã bị để lại bằng pixel.

Dùng giá trị pixel cho tốt sau khi bạn chuyển rem sang px

So sánh tỷ lệ, không chỉ con số

Khi bạn chuyển rem sang px cho cả một bảng định kiểu, hãy nhìn các tỷ lệ giữa các cỡ cũng như bản thân các cỡ. Một thang chữ trong đó mỗi bậc gấp khoảng 1,25 lần bậc trước cho 16, 20, 25, 31 và 39 pixel; một thang 1,5 cho 16, 24, 36 và 54. Nhận ra tỷ lệ cho bạn biết nhà thiết kế định làm gì, và cho phép bạn mở rộng thang một cách nhất quán khi cần một cỡ mới.

Dịch cho những người nghĩ bằng pixel

Không phải ai trong nhóm cũng đọc rem. Quản lý dự án, người viết nội dung và khách hàng thường làm việc từ ảnh chụp màn hình và đề nghị một tiêu đề lớn hơn một chút. Nếu bạn có thể nói rằng tiêu đề hiện là 36 px và sẽ là 40 px ở 2,5 rem, cuộc trao đổi sẽ ngắn. Trang này hữu ích như một cây cầu nhanh giữa hai vốn từ vựng.

Kiểm tra vùng chạm và cỡ tối thiểu

Các hướng dẫn cho màn hình cảm ứng đòi hỏi vùng chạm ít nhất khoảng 44 px, và các hướng dẫn cho chữ đòi hỏi văn bản chính từ khoảng 16 px trở lên. Cả hai đều được nêu bằng pixel. Để kiểm tra một bảng định kiểu viết bằng rem theo chúng, hãy chuyển rem sang px và xem các nút và chữ có vượt qua ngưỡng không.

Lưu ý trường hợp phóng to

Giá trị bạn nhận được là cho cơ sở bạn đã gõ. Nếu người đọc có thể phóng to chữ, hãy thử lại phép chuyển đổi với cơ sở 20 hoặc 24 và xem bố cục đòi hỏi gì ở màn hình. Một thẻ thoải mái ở 16 có thể tràn ở 24, và thời điểm tốt nhất để phát hiện là trước khi trang được xuất bản.

Các công cụ chuyển đổi liên quan

Cùng họ công cụ này bao gồm các phép chuyển đổi lân cận. Để quay lại rem, dùng Chuyển px sang rem. Với các cỡ tương đối so với phần tử, có Chuyển px sang em và Chuyển em sang px, và với các cỡ tương đối so với màn hình, Chuyển px sang vw và Chuyển vw sang px. Với màu trong cùng bảng định kiểu, Chuyển HEX sang RGB và Chuyển HSL sang HEX có sẵn, và với tên lớp, Chuyển văn bản sang kebab-case biến một cụm từ thành một cái tên mà CSS chấp nhận.

Một ví dụ cụ thể

Giả sử bạn đang duyệt một yêu cầu gộp mã và bảng định kiểu có một phần hero với padding: 5rem 1.5rem, một tiêu đề 3.5rem và một đoạn dẫn 1.25rem. Tệp thiết kế ghi 80 px và 24 px phần đệm, tiêu đề 56 px và đoạn dẫn 20 px. Bạn gõ 5 và đọc 80 px, gõ 1,5 và đọc 24, gõ 3,5 và đọc 56, gõ 1,25 và đọc 20. Cả bốn đều khớp, nên bản dựng trung thành. Nếu tiêu đề là 3,25 rem, bạn đã đọc ra 52 và phát hiện sự khác biệt trước khi nó đến tay nhà thiết kế.

Một danh sách kiểm tra ngắn

Trước khi chuyển đổi

Tìm cơ sở: quy tắc gốc trong bảng định kiểu, hoặc cỡ đã tính trong công cụ dành cho nhà phát triển.

Trong khi chuyển đổi

Gõ giá trị rem, kiểm tra cơ sở hiển thị bên cạnh kết quả và ghi lại con số pixel.

Sau khi chuyển đổi

So với tệp thiết kế. Nếu các con số khác nhau, hãy kiểm tra cơ sở trước khi nghi ngờ mã.

Những lỗi thường gặp

Dùng 16 mà không kiểm tra

Đó là mặc định, không phải quy tắc. Hãy kiểm tra phần tử gốc.

Coi pixel là kết quả cuối cùng

Đáp án chỉ đúng với một cơ sở. Người đọc có mặc định lớn hơn thấy pixel lớn hơn.

Nhầm lẫn rem và em

Chúng trông giống nhau nhưng hoạt động khác nhau. Hãy dùng đúng trang cho từng loại.

Con số của bạn ở lại trên thiết bị của bạn

Phép tính diễn ra cục bộ. Các giá trị của bạn được trình duyệt của chính bạn sử dụng và không có gì được gửi đi đâu cả. Không có gì để xóa sau đó và không có tài khoản nào để tạo. Đó là cách đơn giản để chuyển rem sang px.

Tóm tắt

Để chuyển rem sang px ở đây, hãy gõ cỡ bằng rem và đọc ngay bằng pixel, dùng công thức px = rem × cơ sở. Cơ sở bắt đầu ở 16 px, mặc định của trình duyệt, và bạn có thể đổi để khớp với CSS của mình. Phép chuyển đổi giữ tỷ lệ, vì một rem là bất cứ cỡ chữ gốc nào, và nó không thể biết cài đặt của người đọc, nên con số chỉ đúng với cơ sở trong ô. Bảng các giá trị thông dụng, từ 0,5 rem ở 8 px đến 4 rem ở 64 px, giúp bạn đọc một bảng định kiểu ngay. Không có gì được tải lên.