Đơn vị rpx là gì?

rpx, viết tắt của Responsive Pixel, là đơn vị đo kích thước được thiết kế riêng cho các ứng dụng mini trên nền tảng WeChat. Mục tiêu chính của rpx là giúp giao diện tự động điều chỉnh theo độ rộng màn hình thực tế, từ đó đảm bảo trải nghiệm người dùng đồng nhất trên nhiều thiết bị khác nhau.

Nguyên lý hoạt động của rpx

Cơ chế của rpx dựa trên chuẩn thiết kế với chiều ngang cố định là 750 đơn vị. Cụ thể:

• Trên mọi thiết bị, 750rpx luôn tương ứng với chiều rộng toàn màn hình.
• Do đó, 1rpx = (độ rộng màn hình thực tế) / 750.

Ví dụ: Một điện thoại có độ phân giải ngang 375px thì:
1rpx = 375 / 750 = 0.5px
Như vậy, một khối width: 300rpx sẽ hiển thị với chiều rộng 150px trên thiết bị này.

Tại sao nên dùng rpx thay vì px?

Việc sử dụng px truyền thống gặp khó khăn khi thiết kế giao diện đa nền tảng do sự khác biệt về mật độ điểm ảnh và kích thước màn hình. Trong khi đó, rpx giúp:

• Tự động co giãn theo tỷ lệ, duy trì bố cục hợp lý.
• Giảm thiểu việc viết lại CSS cho từng nhóm thiết bị.
• Phù hợp với quy trình làm việc giữa designer và developer – designer thường vẽ mockup ở 750px ngang.

Sử dụng rpx trong WXSS

Dưới đây là ví dụ minh họa cách áp dụng rpx trong bảng định kiểu WXSS của WeChat Mini Program:

.card {
  width: 680rpx;
  height: 200rpx;
  margin: 40rpx auto;
  padding: 30rpx;
  border-radius: 16rpx;
  background-color: #f0f0f0;
}

.title {
  font-size: 36rpx;
  line-height: 50rpx;
  color: #333;
}

.icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}

Trong đoạn mã trên, tất cả kích thước đều dùng rpx, giúp phần tử .card luôn giữ khoảng lề 40rpx so với mép màn hình dù ở thiết bị nào.

Ưu và nhược điểm khi dùng rpx

Ưu điểm

• Tính thích nghi cao: Giao diện tự động điều chỉnh mượt mà trên nhiều kích cỡ màn hình.
• Tăng hiệu suất phát triển: Không cần viết nhiều đoạn media query hay JavaScript để xử lý responsive.
• Phù hợp quy trình thiết kế: Dễ dàng chuyển đổi từ bản vẽ thiết kế 750px sang code.

Hạn chế

• Không kiểm soát tuyệt đối kích thước vật lý: Khi cần một đường viền đúng 1px thật, dùng 1rpx có thể không đủ nét do làm tròn.
• Gặp khó trong debug: Giá trị thực tế (theo px) phụ thuộc vào thiết bị, gây khó khăn khi kiểm tra trực tiếp trên DevTools nếu không rõ hệ số quy đổi.
• Ít linh hoạt trong một số trường hợp đặc biệt: Ví dụ với các biểu đồ hoặc canvas yêu cầu độ chính xác cao.

Các tình huống nên dùng rpx

• Bố cục tổng thể: Chiều rộng container, thanh điều hướng, lưới sản phẩm.
• Khoảng cách và đệm: Margin, padding giữa các thành phần UI.
• Font chữ: Đảm bảo văn bản dễ đọc trên mọi kích thước màn hình.
• Hình ảnh và nút bấm: Các yếu tố cần thay đổi kích thước mềm dẻo theo màn hình.

Kết hợp với các đơn vị khác

Mặc dù rpx rất mạnh, nhưng đôi khi nên kết hợp với các đơn vị khác để đạt hiệu quả tốt nhất:

• Dùng px cho các chi tiết nhỏ như viền 1px cố định.
• Dùng vh/vw khi cần căn theo chiều cao màn hình.
• Dùng em hoặc rem nếu xây dựng hệ thống kiểu chữ linh hoạt.

Ví dụ:

.divider {
  height: 1px;
  width: 100%;
  background: #ddd;
  margin: 20rpx 0;
}

Ở đây, chiều cao cố định bằng 1px để đảm bảo nét mảnh nhất, còn khoảng cách dọc vẫn dùng rpx để phù hợp tổng thể.