Chuyển đổi đơn vị CSS

Chuyển Đổi Đơn Vị CSS Là Gì?

Công cụ chuyển đổi đơn vị CSS là công cụ dịch các giá trị độ dài giữa các hệ thống đo lường CSS khác nhau. CSS định nghĩa hơn một chục đơn vị độ dài, chia thành hai nhóm: đơn vị tuyệt đối như px, pt, cm và in ánh xạ tới các kích thước vật lý cố định, và đơn vị tương đối như rem, em, vw, vh và % phụ thuộc vào ngữ cảnh như kích thước font hay kích thước viewport.

Trình duyệt quy đổi tất cả độ dài CSS về đơn vị pixel trong quá trình render. Khi bạn viết 1.5rem, trình duyệt nhân 1.5 với root font-size (thường là 16px) để được 24px. Khi bạn viết 50vw, nó lấy một nửa chiều rộng viewport hiện tại. Hiểu rõ các mối quan hệ này là cần thiết để xây dựng layout mở rộng tốt trên nhiều thiết bị và tôn trọng các tuỳ chọn của người dùng như kích thước font tuỳ chỉnh đã đặt trong trình duyệt.

Đặc tả CSS Values and Units Module Level 4 (W3C) định nghĩa tỷ lệ chuyển đổi chính xác giữa tất cả các đơn vị tuyệt đối: 1in = 96px = 72pt = 2.54cm = 25.4mm. Các đơn vị tương đối không có tỷ lệ cố định vì chúng phụ thuộc vào ngữ cảnh thực thi. Công cụ chuyển đổi đơn vị CSS miễn phí cho phép bạn tính toán các mối quan hệ này ngay lập tức với root font-size và kích thước viewport cụ thể của bạn, không cần viết bất kỳ đoạn code nào.

Tại Sao Dùng Công Cụ Chuyển Đổi Đơn Vị CSS?

Chuyển đổi đơn vị CSS thủ công đòi hỏi phải nhớ các tỷ lệ, mở máy tính và kiểm tra lại phép tính. Công cụ này thực hiện chuyển đổi ngay trong trình duyệt của bạn mà không cần bất kỳ thao tác nào thêm.

Các Trường Hợp Sử Dụng Công Cụ Chuyển Đổi Đơn Vị CSS

Tham Chiếu Các Đơn Vị Độ Dài CSS

CSS định nghĩa 10 đơn vị độ dài thường dùng. Các đơn vị tuyệt đối có tỷ lệ chuyển đổi cố định sang pixel. Các đơn vị tương đối phụ thuộc vào ngữ cảnh: root font-size cho rem, font-size của phần tử cha cho em và viewport của trình duyệt cho vw và vh.

Đơn Vị Tuyệt Đối và Tương Đối trong CSS

Việc chọn giữa đơn vị tuyệt đối và tương đối ảnh hưởng đến cách layout phản hồi trên các màn hình khác nhau và cài đặt người dùng. Mỗi nhóm có những đánh đổi riêng biệt.

Bảng Chuyển Đổi px sang rem Phổ Biến

Bảng này giả định root font-size là 16px (mặc định của trình duyệt). Nếu dự án của bạn dùng base khác, hãy chia giá trị pixel cho base của bạn để lấy giá trị rem tương đương.

Ví Dụ Code

Các ví dụ này cho thấy cách chuyển đổi đơn vị CSS theo cách lập trình trong JavaScript, Python, CSS custom properties và Sass.

// px to rem (given root font-size of 16px)
const pxToRem = (px, base = 16) => px / base
pxToRem(24)  // → 1.5

// rem to px
const remToPx = (rem, base = 16) => rem * base
remToPx(1.5) // → 24

// px to vw (given viewport width of 1440px)
const pxToVw = (px, viewport = 1440) => (px / viewport) * 100
pxToVw(360)  // → 25

// Dynamic calculation using getComputedStyle
const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
) // → 16 on most browsers

# CSS unit converter functions

def px_to_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_to_px(rem: float, base: float = 16) -> float:
    return rem * base

def px_to_vw(px: float, viewport: float = 1440) -> float:
    return (px / viewport) * 100

def px_to_pt(px: float) -> float:
    return px * 72 / 96

print(px_to_rem(24))     # → 1.5
print(rem_to_px(2.5))    # → 40.0
print(px_to_vw(720))     # → 50.0
print(px_to_pt(16))      # → 12.0

/* Define a base scale using rem */
:root {
  --base: 16px;       /* root font-size */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-8: 2rem;    /* 32px */
}

/* Fluid typography: scales between 1rem (16px) and 2.5rem (40px) */
h1 {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Viewport-relative hero height */
.hero {
  height: calc(100vh - 4rem); /* full viewport minus 64px header */
}

/* Percentage-based grid */
.sidebar { width: 25%; }     /* 360px on 1440px screen */
.content { width: 75%; }     /* 1080px on 1440px screen */

// Reusable px-to-rem function in Sass
@use "sass:math";

$base-font-size: 16px !default;

@function rem($px) {
  @return math.div($px, $base-font-size) * 1rem;
}

// Usage
.card {
  padding: rem(24px);       // → 1.5rem
  margin-bottom: rem(32px); // → 2rem
  border-radius: rem(8px);  // → 0.5rem
  font-size: rem(14px);     // → 0.875rem
}

Câu Hỏi Thường Gặp