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

Vì sao nhà thiết kế và lập trình viên chuyển px sang rem

Công cụ thiết kế nói bằng pixel. Một bản mẫu ghi tiêu đề là 32 px, khoảng cách giữa các phần là 48 px, nút bấm có 16 px phần đệm. Các bảng định kiểu, được viết tốt, nói bằng rem. Khoảng cách giữa hai ngôn ngữ đó là nơi trang này đứng: bạn gõ một cỡ bằng pixel và đọc nó bằng rem, để con số bạn đặt vào CSS có nghĩa đúng như nhà thiết kế muốn. Chuyển px sang rem là một hành động nhỏ, nhưng nó được thực hiện hàng trăm lần trong đời một trang web, và một cơ sở sai biến một bố cục cẩn thận thành một bố cục hơi sai ở khắp nơi cùng lúc.

Lý do bận tâm đến rem là khả năng tiếp cận và sự linh hoạt. Một rem là bội số của cỡ chữ gốc, mà trình duyệt đặt là 16 px trừ khi được bảo khác, và người đọc được tự do thay đổi trong cài đặt của họ. Do đó một bố cục viết bằng rem giữ được hình dạng khi người có thị lực kém tăng cỡ chữ mặc định: chữ, khoảng cách và các hộp lớn lên cùng nhau. Một bố cục viết bằng pixel không đi theo, và người đọc đã xin chữ lớn hơn nhận được chữ lớn hơn trong những hộp chật chội, hoặc chẳng có gì. Đó là lý do hầu như mọi hướng dẫn phong cách hiện đại đều nói cùng một điều: dùng rem cho chữ và khoảng cách.

Trang này làm phép tính trong trình duyệt của bạn. Không có gì được tải lên, và điều mà phép chuyển đổi phụ thuộc vào, cỡ cơ sở, được viết rõ bên dưới và nằm trong một ô bạn có thể đổi, thay vì được giả định sau lưng bạn. Bên dưới bạn sẽ thấy công thức, bảng các cỡ thông dụng, lý do cơ sở quan trọng, những cái bẫy vướng người chuyển px sang rem vội vàng và một hướng dẫn ngắn để dùng kết quả trong bảng định kiểu thật.

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

rem bằng px chia cho cơ sở

Công thức là một phép chia: rem = px ÷ cơ sở. Với cơ sở thường lệ 16 px, một cỡ 24 px thành 1,5 rem, 32 px thành 2 rem và 8 px thành 0,5 rem. Trang hiện kết quả khi bạn gõ, và nó hiện cơ sở đã dùng, nên dòng 24 px = 1,5 rem (16 px) cho bạn biết chính xác điều gì đã được giả định.

Con số 16 từ đâu ra

Cơ sở bắt đầu ở 16 px vì đó là điều một trình duyệt dùng khi không ai nói khác. Nó không phải định luật của web; nó là mặc định của mặc định, và đã ổn định hàng chục năm. Nếu CSS của bạn không bao giờ đụng đến cỡ chữ gốc, 1 rem là 16 px với hầu hết khách. Nếu có, cơ sở là bất cứ gì bạn đặt.

Mẹo 62,5% và vì sao người ta dùng

Một số bảng định kiểu đặt cỡ gốc là 62.5%, khiến 1 rem bằng 10 px trên trình duyệt mặc định, để 24 px đơn giản là 2,4 rem và phép tính dễ làm trong đầu. Nó hiệu quả, nhưng có cái giá: cả trang giờ phụ thuộc vào tỷ lệ phần trăm đó, và bất kỳ thành phần nào mong cơ sở là 16 sẽ ra quá nhỏ. Nếu dự án của bạn làm vậy, hãy gõ 10 vào ô cơ sở của trang này, và mọi con số sẽ khớp với CSS của bạn.

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. Đó là toàn bộ lý do viết như vậy. Khi bạn chuyển px sang rem, con số bạn nhận được là cùng tỷ lệ mà giá trị pixel có ở cơ sở bạn chọn, giờ được biểu diễn theo cách co giãn được.

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 CSS của bạn đặt một cỡ khác trên phần tử gốc, hoặc người đọc đã đổi cỡ chữ mặc định trong trình duyệt của họ, điều mà nhiều người làm và có quyền làm, thì 1 rem không phải 16 px với họ. Con số trên trang chỉ đúng với cơ sở trong ô. Đây không phải khuyết điểm của công cụ mà là bản chất của đơn vị: nó tương đối, và một đơn vị tương đối không có giá trị cố định để chuyển sang.

Làm tròn

Chia cho 16 cho kết quả gọn với nhiều cỡ thông dụng (16, 24, 32, 48, 64) và số thập phân tuần hoàn với các cỡ khác (10 px là 0,625 rem; 13 px là 0,8125). Trang cho nhiều chữ số như con số cần, và bạn quyết định giữ bao nhiêu trong bảng định kiểu. Trình duyệt xử lý số thập phân dài mà không gặp khó, nhưng một giá trị đã làm tròn như 0,8125rem dễ đọc và bảo trì hơn một giá trị có mười chữ số.

Các cỡ thông dụng

Bảng ở cuối trang

Dưới bộ chuyển đổi bạn thấy một bảng các cỡ thông dụng: 8 px là 0,5 rem, 10 px là 0,625, 12 px là 0,75, 14 px là 0,875, 16 px là 1, 18 px là 1,125, 20 px là 1,25, 24 px là 1,5, 32 px là 2, 48 px là 3 và 64 px là 4. Đây là những cỡ xuất hiện thường xuyên nhất trong thang chữ và hệ thống khoảng cách, và có chúng trước mặt tiết kiệm một phép chuyển đổi.

Một thang xây trên rem

Một thói quen hữu ích là chọn một tập nhỏ giá trị rem và dùng lại: 0,5, 1, 1,5, 2, 3 và 4 cho khoảng cách, và 0,875, 1, 1,25, 1,5, 2 cho chữ. Nhà thiết kế gọi đó là một thang, và nó giữ trang web nhất quán về thị giác. Khi một bản mẫu cho bạn một giá trị lẻ như 22 px, hãy dùng bộ chuyển đổi để thấy nó là 1,375 rem, rồi quyết định có làm tròn đến giá trị gần nhất trên thang của bạn không.

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

Gõ giá trị pixel

Hãy nhập cỡ bằng pixel vào ô đầu. Số thập phân được chấp nhận, nên 13.5 px chạy được cũng như 14.

Kiểm tra cơ sở

Hãy để 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õ.

Chép giá trị rem

Hãy đọc con số và dùng nó trong CSS của bạn, với đơn vị viết sau nó: font-size: 1.5rem. Đừng quên đơn vị, vì một con số trần có nghĩa khác ở hầu hết thuộc tính.

Các đơn vị này đến từ đâu

Pixel CSS không phải pixel của màn hình bạn

Khi màn hình thôi có mật độ dự đoán được, một trang đo bằng pixel thật trở thành trang co lại khi màn hình sắc nét hơn. Vì vậy pixel CSS được định nghĩa lại là một độ dài tham chiếu: xấp xỉ 1/96 inch khi nhìn ở khoảng cách đọc thoải mái. Mọi thứ khác trên trang này được xây trên điều đó. Em có trước web: trong chữ chì nó là bề rộng của một khối đúc, đặt theo chữ M hoa, và trong CSS nó nghĩa là cỡ chữ đang có hiệu lực, đó là lý do nó đổi khi bạn lồng các phần tử. Rem được thêm vào để thoát khỏi đúng điều đó: nó là em của phần tử gốc và không bao giờ chồng chất.

Vì sao rem tồn tại

Trước rem, lập trình viên đặt cỡ mọi thứ bằng em hoặc phần trăm, và các phần tử lồng nhau nhân lên nhau: một danh sách trong một danh sách trong một danh sách co lại hay lớn lên theo từng tầng. Rem cho họ một tham chiếu cố định, phần tử gốc, và loại bỏ sự chồng chất. Nếu bạn muốn so sánh hai thứ, hãy chuyển px sang em và xem cùng một giá trị pixel phụ thuộc vào phần tử chứa nó thế nào.

Nơi bạn gặp rem trong thực tế

Chữ

Chữ nội dung thường là 1 rem, tiêu đề 1,25 đến 3 rem, chữ nhỏ 0,75 đến 0,875 rem. Viết chúng bằng rem cho phép người đọc phóng to cả trang bằng cách đổi một cài đặt trình duyệt.

Khoảng cách và bố cục

Lề, phần đệm và khoảng cách bằng rem giữ khoảng trắng tỷ lệ với chữ. Khi chữ lớn lên, khoảng trống quanh nó cũng lớn lên, và bố cục vẫn cân đối thay vì nhồi chữ to hơn vào những hộp cũ.

Truy vấn phương tiện

Các điểm ngắt viết bằng em hoặc rem đáp ứng cỡ chữ của người đọc, nên bố cục chuyển sang dạng hẹp sớm hơn với người đã phóng to chữ. Đó là một sự tinh chỉnh đáng biết, dù pixel vẫn phổ biến trong các điểm ngắt.

Nên để gì ở dạng pixel

Đường viền sợi tóc, bóng đổ hộp và biểu tượng mảnh thường trông đẹp nhất ở cỡ pixel cố định, vì một đường viền 0.0625rem lớn lên thành 0.1rem với chữ lớn không giúp ai. Hãy dùng rem cho những gì nên co giãn và pixel cho những gì không.

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

Quên rằng cơ sở không phải lúc nào cũng là 16

Nếu một dự án đặt html { font-size: 62.5% }, hoặc dùng cỡ gốc linh hoạt, hệ số sẽ khác. Hãy kiểm tra bảng định kiểu trước khi tin một con số từ bất kỳ bộ chuyển đổi nào, kể cả cái này.

Chuyển chính cỡ gốc

Nếu bạn đặt cỡ gốc bằng pixel, cài đặt trình duyệt của người đọc bị ghi đè và lợi ích của rem mất đi. Hãy đặt cỡ gốc theo phần trăm, hoặc để yên, để sở thích của người dùng được tôn trọng.

Dùng rem bên trong một thành phần tự đặt cỡ chữ

Rem luôn tham chiếu đến phần tử gốc, không phải thành phần. Một nút có cỡ chữ 14 px và phần đệm 1rem có phần đệm không đi theo chữ của chính nút. Nếu bạn muốn khoảng cách đi theo chữ của phần tử, đó là việc của em.

Trộn đơn vị mà không có kế hoạch

Một bảng định kiểu dùng px cho một lề, rem cho lề kế tiếp và em cho lề thứ ba rất khó suy luận. Hãy chọn một quy tắc: rem cho chữ và khoảng cách, pixel cho đường viền và bóng đổ, và giữ nó.

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

16 px là bao nhiêu rem?

Một, trên một trình duyệt mặc định. Mười sáu chia cho cơ sở mười sáu.

Rem có tốt hơn px không?

Với chữ và khoảng cách, nó là lựa chọn tốt hơn trong hầu hết dự án, vì nó tôn trọng cài đặt của người đọc. Pixel vẫn đúng cho những thứ không nên co giãn.

Vì sao kết quả của tôi khác với một trang khác?

Có lẽ cơ sở khác. Hãy kiểm tra ô: một số công cụ giả định 10, một số 16, một số 14. Trang này hiện cơ sở cạnh kết quả.

Tôi có phải làm tròn không?

Không. Trình duyệt chấp nhận số thập phân dài. Chỉ làm tròn cho dễ đọc.

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

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

Làm sao để quay lại?

Bằng rem sang px, nhân thay vì chia.

Chọn khôn ngoan khi bạn chuyển px sang rem

Quyết định một cơ sở cho dự án và bám lấy nó

Dù bạn chọn gì, hãy biến nó thành một quyết định và ghi vào tài liệu của dự án. Một nhóm bất đồng về cơ sở tạo ra những thành phần không khớp nhau.

Chuyển ở giai đoạn thiết kế, không phải phút chót

Nếu bạn chuyển px sang rem khi đọc bản mẫu, bạn xây thang vào thiết kế và nhận ra các giá trị lẻ từ sớm. Nếu bạn làm vào cuối, bạn phát hiện chúng như một đống con số không nhất quán.

Hãy cân nhắc cả đơn vị khung nhìn

Với tiêu đề phải lấp đầy màn hình, px sang vw biểu diễn một cỡ như một phần của khung nhìn. Nó co giãn khác với rem, và hai thứ thường được kết hợp.

Thói quen giúp chuyển px sang rem dễ hơn

Giữ một bảng quy đổi trong đầu

Với cơ sở 16, vài điểm neo bao quát hầu hết công việc: 4 px là 0,25 rem, 8 px là 0,5, 12 px là 0,75, 16 px là 1, 24 px là 1,5 và 32 px là 2. Khi một bản mẫu cho bạn giá trị nằm giữa chúng, bạn có thể ước lượng trước khi chuyển px sang rem trên trang, và dùng bộ chuyển đổi chỉ để xác nhận. Sau vài tuần bạn sẽ thuộc bảng mà không cần nhìn.

Để hệ thống thiết kế làm việc

Nếu nhóm của bạn giữ các token thiết kế, như spacing-2 hay font-lg, hãy lưu chúng bằng rem một lần, và để mọi người tham chiếu theo tên. Khi đó không ai cần chuyển px sang rem nữa, và một thay đổi với thang được thực hiện ở một nơi. Bộ chuyển đổi là công cụ bạn dùng khi viết các token, không phải khi dùng chúng.

Ghi giá trị pixel trong một chú thích

Một dòng như padding: 1.25rem; /* 20px */ tốn vài ký tự và giúp lập trình viên kế tiếp khỏi phải với tay lấy máy tính. Nó cũng ghi lại cơ sở bạn đã giả định, điều giúp ích nếu cỡ gốc sau này bị đổi.

Kiểm thử với cài đặt trình duyệt đã đổi

Bằng chứng rằng một trang được xây bằng rem là nó sống sót khi cỡ chữ mặc định lớn hơn. Hãy đổi cài đặt trong trình duyệt, tải lại và nhìn. Những thành phần hỏng là những cái có thứ gì đó bị bỏ lại trong pixel hoặc có chiều cao cố định cắt mất chữ.

Các bộ chuyển đổi liên quan

Cùng họ công cụ bao gồm các phép chuyển đổi lân cận. Để quay lại pixel, hãy dùng rem sang px. Với các cỡ tương đối so với phần tử, có px sang em và em sang px, và với các cỡ tương đối so với màn hình, px sang vw và vw sang px. Nếu công việc của bạn gồm cả màu sắc lẫn kích thước, HEX sang RGB, RGB sang HEX và HEX sang HSL lo các ký hiệu của bảng định kiểu.

Một ví dụ có lời giải

Giả sử một bản mẫu cho tiêu đề thẻ 28 px, phần đệm thẻ 20 px và khoảng cách 12 px giữa các thẻ, và dự án của bạn dùng cơ sở mặc định 16 px. Bạn gõ 28 và đọc 1,75 rem, gõ 20 và đọc 1,25 rem, gõ 12 và đọc 0,75 rem. Trong bảng định kiểu bạn viết font-size: 1.75rem, padding: 1.25rem và gap: 0.75rem. Một khách tăng cỡ chữ trình duyệt lên 20 px thấy cùng chiếc thẻ, phóng thêm một phần tư: tiêu đề là 35 px, phần đệm 25 px và khoảng cách 15 px, tất cả đúng tỷ lệ. Nếu bạn viết bằng pixel, tiêu đề sẽ vẫn ở 28 và chiếc thẻ sẽ trông sai.

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

Trước khi chuyển đổi

Hãy tìm hiểu cơ sở mà CSS của bạn dùng. Quyết định cỡ nào nên co giãn và cỡ nào không.

Trong khi chuyển đổi

Hãy gõ giá trị pixel, kiểm tra cơ sở hiện cạnh kết quả và chép con số rem kèm đơn vị.

Sau khi chuyển đổi

Hãy thử trang với cỡ chữ mặc định lớn hơn trong trình duyệt, và tìm những hộp không còn giữ được chữ của chúng.

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

Cho rằng 1 rem luôn là 16 px

Nó chỉ như vậy khi không ai đổi cỡ gốc, và một số người đọc đã đổi. Hãy viết bố cục để nó cũng chạy ở các cỡ khác.

Đặt cỡ gốc bằng pixel

Nó ghi đè lựa chọn của người đọc. Hãy dùng phần trăm, hoặc đừng đặt.

Chuyển mọi thứ

Không phải cỡ nào cũng nên co giãn. Hãy để đường viền và bóng đổ ở dạng pixel.

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

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

Tóm tắt

Để chuyển px sang rem ở đây, hãy gõ cỡ bằng pixel và đọc nó bằng rem ngay, dùng công thức rem = px ÷ cơ sở. Cơ sở bắt đầu ở 16 px, mặc định của trình duyệt, và bạn có thể đổi cho khớp với CSS của mình. Phép chuyển đổi giữ tỷ lệ: một bố cục viết bằng rem giữ được hình dạng khi cỡ chữ gốc đổi. 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 ô. Các cỡ thông dụng trong bảng dưới bộ chuyển đổi, từ 8 px ở 0,5 rem đến 64 px ở 4 rem, giúp bạn khỏi lặp lại phép tính. Không có gì được tải lên.