Trong thiết kế và phát triển giao diện web hiện đại, việc sử dụng đơn vị đo lường linh hoạt là yếu tố sống còn để đảm bảo website hiển thị hoàn hảo trên mọi kích thước màn hình từ điện thoại di động đến màn hình 4K. Tuy nhiên, việc phải liên tục nhẩm tính xem 24px bằng bao nhiêu rem hay tính toán tỷ lệ vw theo kích thước viewport khiến nhiều lập trình viên tốn thời gian. Công cụ đổi đơn vị CSS trực tuyến của Metoolzy giúp bạn chuyển đổi tức thì giữa các đơn vị PX, REM, EM, VW, VH, PT và % với độ chính xác tuyệt đối.
CSS cung cấp hai nhóm đơn vị đo lường chính với mục đích và hành vi hoàn toàn khác nhau:
Metoolzy16px sẽ luôn giữ nguyên kích thước bất kể kích thước màn hình hay cài đặt kích thước font mặc định của trình duyệt người dùng.px sẽ không phóng to theo, gây cản trở trải nghiệm đọc.<html>). Mặc định trên hầu hết trình duyệt, 1rem = 16px. Nếu người dùng thay đổi kích thước font gốc, toàn bộ website sẽ tự động co giãn theo tỷ lệ tương ứng.1vw = 1% chiều rộng màn hình). Rất phù hợp cho typography quy mô lớn (fluid typography) và full-screen sections.Dưới đây là bảng quy đổi các kích thước thông dụng nhất trong thiết kế UI/UX hiện đại:
| Pixel (px) | REM (16px base) | EM (Parent base) | Tỷ lệ phần trăm (%) | Điểm áp dụng UI phổ biến (Tailwind CSS) |
|---|---|---|---|---|
| 8px | 0.5rem |
0.5em |
50% |
Khoảng cách siêu nhỏ (padding, margin xs), badge |
| 10px | 0.625rem |
0.625em |
62.5% |
Chú thích ảnh (caption), tooltip nhỏ |
| 12px | 0.75rem |
0.75em |
75% |
Chữ phụ (text-xs), timestamp, metadata |
| 14px | 0.875rem |
0.875em |
87.5% |
Chữ thân bài nhỏ (text-sm), menu phụ |
| 16px | 1rem |
1em |
100% |
Cỡ chữ cơ sở (Body text), input form chuẩn iOS |
| 18px | 1.125rem |
1.125em |
112.5% |
Tiêu đề phụ (text-lg), lead paragraph |
| 20px | 1.25rem |
1.25em |
125% |
Tiêu đề bài viết con (H4, text-xl) |
| 24px | 1.5rem |
1.5em |
150% |
Tiêu đề mục (H3, text-2xl) |
| 32px | 2rem |
2em |
200% |
Tiêu đề phần (H2, text-3xl) |
| 40px | 2.5rem |
2.5em |
250% |
Tiêu đề chính trang (H1, text-4xl) |
| 48px | 3rem |
3em |
300% |
Banner Hero headline (text-5xl) |
Việc phối hợp nhịp nhàng các đơn vị giúp mã CSS của bạn dễ bảo trì và thích ứng linh hoạt:
font-size, margin, padding bằng REM giúp toàn bộ giao diện co giãn đồng bộ khi kích thước font người dùng thay đổi.padding của nút bấm (Button) hoặc khoảng cách giữa biểu tượng và chữ. Khi bạn đổi font-size của nút từ nhỏ sang lớn, khoảng đệm bên trong nút sẽ tự động co giãn theo cỡ chữ mà không cần viết thêm CSS.border: 1px solid #ccc), bóng đổ (box-shadow), hoặc các đường chia ngăn phân cách (divider) nên giữ cố định bằng PX để tránh việc hiển thị bị nhòe hoặc biến mất trên các màn hình mật độ điểm ảnh cao.clamp(): font-size: clamp(1rem, 2.5vw, 2rem); để cỡ chữ tự động phóng to dần theo màn hình mà không bao giờ nhỏ hơn 1rem hay lớn hơn 2rem.Mặc định hệ thống để cỡ chữ cơ sở là 16px (tiêu chuẩn trình duyệt toàn cầu). Nếu dự án của bạn áp dụng kỹ thuật html { font-size: 62.5%; } (đưa 1rem = 10px), bạn có thể dễ dàng đổi giá trị Base sang 10px để tính toán phù hợp.
Nhập số vào bất kỳ ô đơn vị nào (PX, REM, EM, VW, VH…). Ngay khi bạn vừa gõ, toàn bộ các ô đơn vị còn lại sẽ tự động tính toán và cập nhật theo thời gian thực.
Nhấn vào biểu tượng sao chép bên cạnh giá trị mong muốn để dán trực tiếp vào file CSS, SCSS hoặc cấu hình Tailwind của bạn.
Tất cả các trình duyệt web phổ biến (Chrome, Safari, Firefox, Edge) đều đặt kích thước font mặc định của thẻ <html> là 16px. Do đó, nếu không có khai báo CSS ghi đè ở thẻ gốc, 1rem sẽ tương đương đúng 16px vật lý.
Kỹ thuật này từng phổ biến để đưa 1rem = 10px giúp dễ nhẩm tính (1.4rem = 14px, 2.4rem = 24px). Tuy nhiên, trong các dự án hiện đại sử dụng CSS framework như Tailwind hay CSS-in-JS, việc giữ nguyên base 16px chuẩn được khuyến nghị hơn để tránh xung đột với các thư viện bên ngoài.
Có. 100vw sẽ bao gồm cả chiều rộng của thanh cuộn trình duyệt (khoảng 15-17px trên Windows), điều này đôi khi gây ra hiện tượng tràn màn hình và xuất hiện thanh cuộn ngang ngoài ý muốn. Do đó, với các phần tử toàn màn hình, nên ưu tiên dùng width: 100% thay vì width: 100vw.
Công cụ cung cấp khả năng quy đổi chuẩn xác cho các đơn vị viewport cơ bản (VW, VH) và liên tục cập nhật để hỗ trợ các đơn vị viewport động mới nhất của chuẩn CSS3.
Việc áp dụng giải pháp đổi đơn vị css giúp bạn tiết kiệm đáng kể thời gian thao tác, loại bỏ sai sót thủ công và nâng cao năng suất làm việc mỗi ngày. Hãy thường xuyên thực hiện đổi đơn vị css trực tiếp trên Metoolzy để đạt hiệu quả tối ưu nhất cho dự án của bạn.
Để nâng cao tối đa hiệu suất làm việc, bạn có thể kết hợp cùng các công cụ miễn phí sau: