Chuyển đổi REM sang PX

Đơn vị rem CSS chia tỷ lệ từ kích thước phông chữ của phần tử gốc - thường là phần tử html - không phải từ mỗi phần tử gốc như em. Một rem bằng bất kỳ kích thước pixel nào mà gốc được đặt thành. Trình duyệt mặc định có kích thước gốc là 16 px, vì vậy 1 rem = 16 px trừ khi biểu định kiểu của bạn thay đổi html { font-size }. rem tôn trọng cài đặt thu phóng và trợ năng của người dùng giúp phóng to văn bản mặc định; px vẫn tuyệt đối trên lưới pixel.

Các bản chuyển giao thiết kế từ Figma và Sketch thường chú thích px, trong khi các cơ sở mã sản xuất thường tạo khoảng cách và nhập rem để thống nhất với mã thông báo thiết kế. Bộ chuyển đổi này thu hẹp khoảng cách ở kích thước gốc đã chọn của dự án của bạn. Nhiều hệ thống thiết kế giữ gốc 16 px; một số nhóm đặt gốc 10 px để bản đồ tính nhẩm 1,6 rem ≈ 16 px — luôn khớp với giá trị trong CSS chung của bạn.

Chuyển đổi rem → px hoặc px → rem bằng điều khiển được phân đoạn. Nhãn trường giá trị sẽ chuyển sang hiển thị đơn vị bạn đang nhập. Trường kích thước phông chữ gốc đặt hệ số nhân - nếu thủ thuật html { font-size: 62,5% } của bạn đang hoạt động, thì đó là gốc hiệu dụng 10 px, không phải 16 px.

Ví dụ hoạt động với các trường rem → px mặc định: 1,5 rem ở gốc 16 px. Nhân kết quả tiêu đề 1,5 × 16 = 24 px. Tóm tắt có nội dung “1,5 rem @ 16 px root” và hàng công thức hiển thị 1,5 × 16. Lật sang px → rem với 48 px được nhập và bạn nhận được 3 rem (48 16).

Các mục tỷ lệ khoảng cách phổ biến: 0,25 rem = 4 px, 0,5 rem = 8 px, 1 rem = 16 px, 1,5 rem = 24 px, 2 rem = 32 px ở gốc mặc định. Các bước sắp chữ thường sử dụng 0,875 rem (14 px) cho bản sao giao diện người dùng nhỏ và 1,125 rem (18 px) cho văn bản lớn đủ điều kiện theo ngưỡng tương phản văn bản lớn WCAG.

Các lỗi phổ biến bao gồm chuyển đổi với gốc 16 px trong khi quá trình sản xuất sử dụng gốc 10 px (mọi thứ đều có kích thước nhỏ hơn), trộn phần đệm rem với chiều cao dòng em trên các thành phần lồng nhau và giả sử trình duyệt mặc định sau khi người dùng thay đổi kích thước văn bản trợ năng của hệ điều hành - rem phù hợp với cài đặt đó, px thì không.

các đơn vị em cố tình nằm ngoài phạm vi - các hợp chất em trên mỗi kích thước phông chữ gốc lồng nhau, do đó một hệ số nhân không thể đại diện cho tất cả các chuỗi em. Chỉ sử dụng công cụ này cho rem và px.

Giới hạn: chuyển đổi một giá trị - không có calc() với các đơn vị hỗn hợp, khung nhìn vw hoặc điểm dừng kẹp(). Kết quả pixel phụ có thể xuất hiện đối với các gốc lẻ; trình duyệt làm tròn px tại thời điểm kết xuất.