CSS Units Converter

Chuyển đổi px, rem, em, pt và các đơn vị CSS

Nhập giá trị

Giá trị (px)

Base font-size (px)

Kết quả chuyển đổi

rem

1.0000

0.8333

1.4815

0.4233

4.2333

0.1667

CSS Units Converter - Chuyển Đổi px, rem, em, pt, vw, vh Online Miễn Phí

Công cụ chuyển đổi đơn vị CSS online miễn phí. Chuyển đổi tức thì giữa 10 đơn vị: px, rem, em, pt, pc, vw, vh, cm, mm, in. Tùy chỉnh base font-size, quick buttons cho sizes phổ biến. Hữu ích cho responsive design và accessibility.

Tính năng nổi bật

Chuyển đổi 10 đơn vị CSS cùng lúc

px, rem, em - đơn vị phổ biến nhất

pt, pc - đơn vị in ấn

vw, vh - viewport units cho responsive

cm, mm, in - đơn vị vật lý

Tùy chỉnh base font-size (mặc định 16px)

Quick buttons: 8, 10, 12, 14, 16, 18, 20, 24, 32, 48, 64px

Copy từng đơn vị với một click

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

rem (root em) là đơn vị relative dựa trên font-size của root element (html). Ưu điểm: (1) Responsive - thay đổi root font-size sẽ scale toàn bộ UI, (2) Accessibility - users có thể tăng font-size trong browser settings và UI sẽ scale theo, (3) Maintainable - dễ tạo consistent spacing system. px là absolute unit, không scale theo user preferences.

Lợi ích khi sử dụng

•Responsive design dễ dàng hơn
•Accessibility tốt hơn cho users
•Không cần tính toán thủ công
•Chuyển đổi nhanh giữa các đơn vị
•Học CSS units trực quan

Cách chuyển đổi đơn vị CSS

1Nhập giá trị px vào ô input
2Hoặc click quick button cho sizes phổ biến
3Điều chỉnh base font-size nếu khác 16px
4Xem kết quả chuyển đổi cho tất cả đơn vị
5Click icon copy bên cạnh đơn vị cần dùng

Câu hỏi thường gặp (FAQ)

1rem = bao nhiêu px?

Mặc định 1rem = 16px (base font-size của browser). Nếu bạn set html { font-size: 62.5%; } thì 1rem = 10px, dễ tính toán hơn (16px = 1.6rem).

em và rem khác gì nhau?

rem luôn relative với root (html) font-size. em relative với font-size của parent element, có thể gây compound effect khó kiểm soát. Khuyến nghị dùng rem cho spacing/sizing, em cho typography.

Khi nào dùng vw/vh?

vw (viewport width) và vh (viewport height) hữu ích cho full-screen sections, hero images, hoặc khi cần element scale theo viewport. 100vw = full width, 100vh = full height.

pt dùng khi nào?

pt (point) là đơn vị in ấn truyền thống (1pt = 1/72 inch). Dùng khi cần CSS cho print stylesheets hoặc khi designer cung cấp specs bằng pt.

Làm sao setup rem system?

Cách phổ biến: html { font-size: 62.5%; } (1rem = 10px), hoặc giữ 16px và dùng công cụ này để convert. Tailwind CSS và nhiều frameworks đã có sẵn rem-based spacing scale.

Từ khóa liên quan

css units converterpx to remrem to pxem to pxcss unit calculatorchuyển đổi đơn vị cssresponsive unitsviewport units

Hợp tác ngay với Tấn Phát Digital

Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.