Chuyển Đổi Pixel sang REM miễn phí

Cách hoạt động

Mọi chuyển đổi chạy hoàn toàn trong trình duyệt bằng bộ máy số học tự viết không phụ thuộc. Công cụ chuyển đổi giữa bảy đơn vị CSS (px, rem, em, pt, vw, vh và %) bằng cách đưa mọi phép tính qua pixel làm cơ sở chung, áp dụng phép chia hoặc nhân đơn giản với cỡ chữ gốc, cỡ chữ phần tử cha hoặc kích thước viewport bạn đã cấu hình.

1. 1
   Đặt các giá trị ngữ cảnh

   Trước khi chuyển đổi, bạn cấu hình bốn con số làm cho đơn vị CSS tương đối có ý nghĩa: cỡ chữ gốc (mặc định 16px, là mặc định của trình duyệt), cỡ chữ phần tử cha (cho chuyển đổi em và %), và chiều rộng, chiều cao viewport (cho vw và vh). Đây là những giá trị mà trình duyệt sẽ dùng khi xử lý CSS lúc chạy.
2. 2
   Pixel làm đơn vị trung gian chung

   Công cụ trước tiên gọi toPixels() để chuẩn hóa đầu vào thành số pixel thô — ví dụ, 1.5rem thành 1.5 × baseFontPx, và 50vw thành 0.5 × vpWidth. Sau đó fromPixels() chia số pixel đó cho hệ số phù hợp của đơn vị đích. Cả bảy đơn vị được hiển thị cùng lúc trong bảng chuyển đổi.
3. 3
   Tra token Tailwind gần nhất

   Sau khi chuyển đổi, công cụ tính giá trị rem và quét hai bảng tra cố định — mười ba token cỡ chữ của Tailwind (text-xs đến text-9xl) và thang khoảng cách của nó — tìm giá trị khớp gần nhất theo khoảng cách tuyệt đối. Dấu = nghĩa là giá trị trùng chính xác một token; ≈ nghĩa là giá trị xấp xỉ gần nhất.
4. 4
   Viết lại CSS hàng loạt qua regex

   Bảng dán CSS nhận văn bản CSS thô và áp dụng thay thế regex: ở chế độ px→rem, nó khớp mọi token px và thay phần số bằng value/baseFontPx + rem; ở chế độ rem→px thì ngược lại. Số lần thay thế được hiển thị để bạn kiểm tra có bao nhiêu giá trị đã được viết lại.

Công cụ liên quan