CSSChia làm ba nhóm theo cái mà giá trị phụ thuộc vào.
css
.a { font-size: 16px; } /* tuyệt đối, không đổi theo ngữ cảnh */
.b { padding: 1em; } /* = font-size CỦA CHÍNH element (kế thừa từ cha nếu không đặt) */
.c { padding: 1rem; } /* = font-size của <html>, thường 16px */
.d { width: 50%; } /* = kích thước của element cha */
.e { width: 50vw; } /* = 50% chiều rộng viewport */| Đơn vị | Neo vào | Rủi ro |
|---|---|---|
px | không gì | không co theo cỡ chữ người dùng đặt |
em | font-size của element hiện tại | nhân dồn khi lồng nhiều lớp |
rem | font-size của <html> | ổn định, dễ đoán |
% | element cha | phụ thuộc thuộc tính đang tính |
vw / vh | viewport | vh nhảy trên mobile |
Lưu ý — em nhân dồn:
css
.menu { font-size: 0.9em; }
.menu li { font-size: 0.9em; } /* thực tế = 0.81em so với gốc */Lưu ý — vh trên mobile: thanh địa chỉ trượt lên/xuống làm 100vh cao hơn màn hình thật. Từ 2022 có bộ đơn vị mới:
- svh — chiều cao khi thanh địa chỉ hiện
- lvh — khi thanh địa chỉ ẩn
- dvh — thay đổi theo thời gian thực (thường là thứ bạn muốn)
Chốt thực dụng: cỡ chữ và khoảng cách dùng rem; thứ cần co theo chữ của chính nó (padding trong nút) dùng em; chiều cao full màn hình dùng dvh thay vh.