Bài 42: Cách sử dụng Units trong css

Cách sử dụng Units trong css

Trong CSS, units được sử dụng để xác định kích thước và khoảng cách của các phần tử trên trang web. Có nhiều loại units khác nhau có thể được sử dụng trong CSS, bao gồm:

1. Absolute units: Đây là các units được đo bằng đơn vị thực tế như pixel, inch, centimeter, và millimeter. Những units này có giá trị cố định và không thay đổi dựa trên kích thước màn hình hay zoom level.

Ví dụ:

div {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

2. Relative units: Đây là các units được đo dựa trên một giá trị khác như phần trăm (%) hoặc em (em). Những units này có giá trị linh hoạt và thay đổi dựa trên kích thước màn hình hay zoom level.

Ví dụ:

div {
  width: 50%;
  font-size: 1.2em;
}

3. Viewport units: Đây là các units được đo dựa trên kích thước của viewport (không gian hiển thị trên màn hình). Những units này bao gồm vw (viewport width), vh (viewport height), vmin (viewport minimum dimension), và vmax (viewport maximum dimension).

Ví dụ:

div {
  width: 50vw;
  height: 50vh;
}

4. Font-relative units: Đây là các units được đo dựa trên kích thước của font chữ. Những units này bao gồm rem (root em) và ch (character).

Ví dụ:

div {
  padding: 1rem;
  font-size: 1.2ch;
}

Lưu ý rằng việc sử dụng units phụ thuộc vào yêu cầu thiết kế của trang web và mục đích sử dụng của các phần tử. Nên sử dụng units linh hoạt và dễ hiểu để giúp tăng tính đáp ứng và khả năng bảo trì của trang web.