Đơn vị độ dài tương đối trong CSS dùng để chỉ định độ dài tương đối đối với thuộc tính độ dài khác.
| STT | Đơn vị & Mô tả |
|---|---|
| 1 | em Tương đối font-size của phần tử (4em = 4 lần font hiện tại) |
| 2 | ex Tương đối x-height của font hiện tại |
| 3 | ch Tương đối chiều rộng ký tự "0" |
| 4 | rem Tương đối font-size của root element (html) |
| 5 | vw 1% chiều rộng viewport |
| 6 | vh 1% chiều cao viewport |
| 7 | vmin 1% chiều nhỏ hơn của viewport |
| 8 | vmax 1% chiều lớn hơn của viewport |
| 9 | % Tương đối phần tử cha |
Ví dụ 1: em
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 1.4em;
}
</style>
</head>
<body>
<h1>Chi tiết</h1>
<p class="demo">Trung tâm thi gần trường ABC College.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>
Kết quả
Ví dụ 2: ch
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 4ch;
}
</style>
</head>
<body>
<h1>Chi tiết</h1>
<p class="demo">Trung tâm thi gần trường ABC College.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>
Kết quả
Khuyến nghị thực hành:
- rem: Font-size gốc, spacing hệ thống (consistent scaling)
- em: Component nội bộ, relative to parent
- vw/vh: Hero sections, full-screen layouts
- %: Width container, flex/grid children
- ch: Width dựa trên ký tự (readable line length ~60-75ch)
- Tránh px cho text trong responsive design