Các đơn vị CSS chia thành absolute (cố định) và relative (co giãn theo thứ gì đó). Lựa chọn đúng là chìa khóa cho layout responsive và dễ tiếp cận (accessible).
.x { width: 100px; } /* px — pixel cố định; dễ đoán, không co giãn */
Dùng cho những thứ không nên co giãn (border, các chi tiết nhỏ cố định).
pxfont-size: 1.5rem; /* rem — relative theo font-size GỐC (html). Nhất quán. */
font-size: 1.2em; /* em — relative theo font-size của CHA. Lũy tích! */
width: 50%; /* % — relative theo kích thước của cha */
width: 50vw; /* vw — 50% CHIỀU RỘNG viewport */
height: 100vh; /* vh — 100% CHIỀU CAO viewport */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative theo cha) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative theo root) */
em lũy tích qua việc lồng nhau (con của một con sẽ nhân lên), có thể tăng vọt ngoài dự kiến. rem luôn tham chiếu đến root, nên dễ đoán — lựa chọn hàng đầu cho font size và spacing. Dùng em khi bạn muốn kích thước relative theo font cục bộ (ví dụ padding trên một button co giãn theo text của nó).
font-size: 16px; /* ❌ bỏ qua tùy chọn font-size của trình duyệt người dùng */
font-size: 1rem; /* ✅ co giãn khi người dùng tăng kích thước mặc định */
Dùng rem cho chữ tôn trọng những người dùng đặt font mặc định lớn hơn — một lợi ích accessibility thực sự mà px phá vỡ.
Đơn vị đúng giúp layout responsive và accessible: rem cho chữ/spacing (dễ đoán + tôn trọng tùy chọn người dùng), %/vw/vh cho layout linh hoạt, px cho chi tiết cố định, và em cho kích thước relative cục bộ.
Các viewport unit mới hơn (dvh, svh) cũng khắc phục vấn đề chiều cao thanh địa chỉ trên mobile.