PX to REM Converter

Chuyển đổi đơn vị PX sang REM (CSS). Hỗ trợ font-size cơ sở tùy chỉnh.

▶Về công cụ này

Chuyển đổi kích thước Pixel sang REM dựa trên font-size cơ sở. Thiết yếu cho thiết kế Web Responsive.

Giao diện công cụ

px

rem

Sử dụng PX hay REM tốt hơn?

REM và Khả năng truy cập (Accessibility)

Đơn vị px là kích thước cố định, trong khi rem (Root EM) là kích thước tương đối dựa trên font chữ của trình duyệt người dùng. Việc sử dụng rem giúp trang web tự động điều chỉnh theo cài đặt font chữ của người dùng, cực kỳ quan trọng cho người có thị lực kém.

Cách tính đơn giản

Thông thường, trình duyệt có font chữ cơ sở là 16px. Khi đó, 1rem = 16px. Nếu bạn muốn thiết kế một tiêu đề 32px, bạn chỉ cần lấy 32 / 16 = 2rem. Công cụ này giúp bạn thực hiện các phép tính đó một cách tức thì.

Tùy chỉnh Kích thước cơ sở

Đôi khi các dự án quy định kích thước font chữ gốc khác (ví dụ: 62.5% tương đương 10px để dễ tính toán). Bạn có thể thay đổi "Kích thước font chữ cơ sở" trong công cụ này để phù hợp với quy định của dự án bạn đang làm.

Cách sử dụng

  1. Chỉnh font-size cơ sở
  2. Nhập PX hoặc REM

Khi nào nên dùng

Khi cần chuyển đổi đơn vị CSS để tạo website responsive và dễ tiếp cận (accessibility).

Ví dụ

Chuyển 16px thành 1rem, chuyển 2.5rem thành 40px (với base 16px).

Bộ công cụ