Đơn vị trong HTML & CSS
| Đơn vị | Mô tả |
|---|---|
| % | Phần trăm |
| cm | centimeter |
| in | inch(1 inch = 2.54 cm) |
| mm | millimeter |
| em | 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. vd: 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, nhất là trong trường hợp người dùng sử dụng zoom để phóng to chữ trong trình duyệt, đơn vị em sẽ giãn ra theo tỉ lệ chữ. Nếu có nhiều tag lồng nhau, thì phần tử con khi sử dụng |
| 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). |
| ex | 1ex bằng chiều cao của chữ x in thường của font hiện hành. Do đó, đơ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. |
| pt | point (1pt = 1/72inch) |
| pc | pica (1pc = 12pt) |
| px | Pixels (điểm ảnh trên màn hình máy tính) |
| vh | 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. |
| vw | 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. |
| vmin | 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% màn hình tối đa, ví dụ trình duyệt hiển thị 1024x960, thì 1vmax = 10.24px. |
| 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úng ta thường sử dụng các đơn vị sau để code:
%: thường đượ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: thường được dùng cho những nội dung có khả năng co giản khi zoom text.
px: thường được dùng để định dạng khoảng cách, chiều rộng, chiều cao,...