Trình chuyển đổi đơn vị CSS

Trình chuyển đổi đơn vị CSS - Máy tính px, rem, em, %

🎨 Chuyển đổi giữa các đơn vị CSS: pixel (px), rem, em, phần trăm (%), point (pt) và đơn vị viewport (vw, vh). Công cụ thiết yếu cho thiết kế và phát triển web responsive.

Các loại đơn vị CSS

• Đơn vị tuyệt đối: px, pt, cm, mm, in - kích thước cố định, không phụ thuộc ngữ cảnh
• Đơn vị tương đối: rem, em, %, vw, vh - thay đổi theo phần tử cha hoặc viewport
• Theo font: rem, em, ch, ex - dựa trên kích thước font
• Theo viewport: vw, vh, vmin, vmax - dựa trên kích thước viewport

Giải thích đơn vị

• px (pixel): 1px = 1 pixel thiết bị. Chính xác nhưng không linh hoạt.
• rem: Tỷ lệ theo phần tử gốc (html). Mặc định 1rem = 16px.
• em: Tỷ lệ theo font của phần tử cha. Có thể “nhân lên” trong phần tử lồng nhau.
• %: Tỷ lệ theo thuộc tính của phần tử cha. 100% = bằng phần tử cha.
• pt (point): Đơn vị in ấn. 1pt = 1/72 inch ≈ 1.333px.
• vw: 1vw = 1% chiều rộng viewport. 100vw = full width.
• vh: 1vh = 1% chiều cao viewport. 100vh = full height.

Chuyển đổi phổ biến

• 1rem = 16px (mặc định trình duyệt)
• 1em = 16px (nếu phần tử cha là 16px)
• 100% = kích thước phần tử cha
• 12pt = 16px (phổ biến trong in ấn)
• 1vw = 19.2px (viewport 1920px)

Phương pháp 62.5%

Đặt html { font-size: 62.5%; } để 1rem = 10px. Điều này giúp tính toán dễ hơn: 1.6rem = 16px, 2.4rem = 24px, v.v.

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

• Dùng rem cho font: tôn trọng tuỳ chọn kích thước font của người dùng
• Tránh px cho font: không thay đổi theo cài đặt người dùng
• Dùng đơn vị tương đối: thân thiện khi zoom/phóng to
• Kiểm tra nhiều kích thước: thử zoom 200% và chế độ chữ lớn

Thiết kế responsive

Dùng rem cho media query: @media (min-width: 48rem) thay vì 768px. Điều này giúp breakpoint thay đổi theo tuỳ chọn kích thước font của người dùng.

💡 Mẹo pro: Thực hành tốt hiện đại là dùng rem cho hầu hết kích thước (font, khoảng cách, breakpoint), px cho viền và chi tiết nhỏ, và % hoặc đơn vị viewport cho layout. Tránh dùng em cho khoảng cách vì có thể “nhân” ngoài ý muốn.