Đơn vị tương đối và tuyệt đối là gì?
Trước khi tìm hiểu về từng loại đơn vị trong CSS, hãy cùng mình tìm hiểu qua về cách phân loại các đơn vị này nhé.
Đơn vị tương đối
Đơn vị tương đối (Relative Units) là những đơn vị được tính một cách tương đối dựa trên các phần tử khác (có thể là phần tử cha hoặc phần tử root).
Các đơn vị loại này khá linh động, rất thích hợp cho việc thích ứng trên các thiết bị khác nhau.
Ví dụ: rem, em, %, vw, vh, ex, ch, vmin, vmax
Đơn vị tuyệt đối
Đơn vị tuyệt đối (Absolute Units) là những đơn vị mà giá trị của nó không bao giờ thay đổi và không bị ảnh hưởng bởi các thành phần khác. Tức là trong mọi kích thước màn hình thì kích thước của nó vẫn như thế.
Với loại đơn vị này chỉ nên dùng cho những thứ có kich thước cố định, hoặc kích thước nhỏ không quá ảnh hưởng như border, …
Ví dụ: px, pt, cm, mm, pc, in.
Đơn vị đo HTML và CSS Tuyệt Đối
| Tên đơn vị | Giải thích |
| px |
pixels còn gọi là điểm ảnh 1px sẽ tương đương với một điểm ảnh trên màn hình hiển thị. Chất lượng của điểm ảnh sẽ hoàn toàn khác nhau trên một số thiết bị như mobile sẽ khác với desktop |
| pt | points (1pt = 1/72 in) |
| pc | picas (1pc = 12 pt) |
| mm | đơn vị đo bằng milimet |
| cm | đơn vị đo bằng cm |
| in |
inches (1in = 96px = 2.54cm) |
Đơn vị đo HTML và CSS Tương Đối
| Tên đơn vị | Giải thích |
| em |
Tỉ lệ với thuộc tính font-size của chính nó hoặc phần tử cha. 1em ngang bằng với kích cỡ font hiện hành, 2em = 2 lần kích cỡ font hiện hành. ví dụ một thành phần được thiết lập font là 12pt, vậy 2em bằng với 24pt, ’em‘ là đơn vị rất hữu dụng trong css |
| rem | Tỉ lệ với thuộc tính font-size của phần tử root (html). rem tương tự như đơn vị em tuy nhiên phần tử con sử dụng sẽ không chịu ảnh hưởng của phần tử cha kế tiếp, mà chịu ảnh hưởng của phần tử cha đầu tiên (root). |
| vw |
Tỉ lệ với kích thước chiều rộng khung nhìn. 1vw sẽ bằng 1% chiều rộng của màn hình hiển thị. ví dụ chiều rộng trình duyệt hiển thị là 1024px, thì vw = 10.24px. |
| vh |
Tỉ lệ với kích thước chiều cao khung nhìn. 1vw = 1% viewport height. 1vh sẽ bằng 1% chiều cao của màn hình hiển thị. Ví dụ chiều cao trình duyệt hiển thị là 1000px, thì 1vh = 10px. |
| % | Tỉ lệ phần trăm với phần tử cha |
| vmin |
1 vmin = 1 vw or 1 vh (Chọn cái nào nhỏ hơn) - 1% màn hình tối thiểu,. ví dụ trình duyệt hiển thị 1024x960, thì 1vmin = 9.6px. |
| vmax | 1 vmin = 1 vw or 1 vh (Chọn cái nào lớn hơn) |
| calc() | Đây là tính toán đơn vị, ví dụ: calc(100% - 20px), cách sử dụng này rất tiện lợi trong việc chỉnh responsive. |
| ch | 1 ch = chiều rộng của ký tự “0” |
| ex |
1 ex = chiều cao của ký tự x trong font chữ hiện tại. Đơn vị này không những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14ex nhưng chiều cao các chữ của các loại font là khác nhau. |
Nên sử dụng đơn vị HTML & CSS nào?
Dưới đây là một số kinh nghiệm được tổng hợp từ các nhà thiết kế website:
%: nên được dùng để định dạng phần trăm cho chiều rộng hay khoảng cách, hoặc font size.
em: nên được dùng cho những nội dung có khả năng co giản khi zoom text.
px: nên được dùng để định dạng khoảng cách, chiều rộng, chiều cao,...
