CSS Đơn vị tuyệt đối và tương đối

Cả đơn vị tuyệt đối (Absolute Units) và đơn vị tương đối (Relative Units) trong CSS đều thuộc loại đơn vị khoảng cách (Distance units).

Đơn vị tương đối (Relative Units)

Đơn vị tương đối định nghĩa độ dài của một phần tử tham chiếu đến một phần tử khác. Ví dụ: vh là đơn vị tương đối so với chiều cao viewport.

STT	Đơn vị & Tương đối với
1	% — Kích thước phần tử cha
2	em — Kích thước font của chính phần tử
3	ex — Chiều cao chữ 'x' của font phần tử
4	lh — Chiều cao dòng (line-height) của phần tử
5	rem — Kích thước font của phần tử gốc (root - html)
6	rlh — Line-height của phần tử gốc
7	vb — 1% kích thước viewport theo trục block của root
8	vh — 1% chiều cao viewport
9	vmax — 1% chiều lớn hơn của viewport
10	vmin — 1% chiều nhỏ hơn của viewport
11	vw — 1% chiều rộng viewport

Ví dụ đơn vị tương đối

<!DOCTYPE html>
<html>
<head>
<title>CSS Relative Units</title>
<style>
html { font-size: 14px; line-height: normal; }
form { width: 70%; margin: 0 auto; text-align: center; }
* { padding: 2px; margin: 5px; }
input[type="button"] { border-radius: 10px; }
#textContain { font-size: 20px; line-height: 2; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Relative-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="1" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="em" checked><label>em</label>
<input class="radio" type="radio" name="heading" value="rem"><label>rem</label>
<input class="radio" type="radio" name="heading" value="vw"><label>vw</label>
<input class="radio" type="radio" name="heading" value="vh"><label>vh</label>
<input class="radio" type="radio" name="heading" value="ex"><label>ex</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
    if (textSelect.value === '') textPreview.textContent = 'Type some text first';
    else {
        for (var i = 0; i < 5; i++) {
            var radInp = document.getElementsByClassName('radio')[i];
            if (radInp.checked === true) {
                textPreview.textContent = textSelect.value;
                textPreview.style.fontSize = numSelect.value + radInp.value;
            }
        }
    }
}
</script>
</body>
</html>

Đơn vị tuyệt đối (Absolute Units)

Đơn vị tuyệt đối không phụ thuộc vào ngữ cảnh, cố định về mặt vật lý.

STT	Đơn vị & Tên
1	cm — Centimet (1 cm = 10 mm)
2	in — Inch (1 in = 2.54 cm)
3	mm — Milimet
4	pc — Picas (1 pc = 12 pt)
5	pt — Points (1 pt = 1/72 in)
6	px — Pixels (1 px = 0.75 pt)

Khi nào dùng đơn vị nào?

rem/em: Font-size, spacing — responsive, accessible
vh/vw/vmin/vmax: Layout full-screen, hero sections
%: Width, margin, padding trong grid/flex
px: Border, shadow, media query breakpoint, icon size cố định
cm/mm/in/pt/pc: Chỉ dùng cho CSS print (@media print)

Mẹo: Thiết lập html { font-size: 62.5%; } (10px) để dễ dàng chuyển đổi: 1rem = 10px, 1.6rem = 16px.