Trong thiết kế web, việc chọn đúng đơn vị CSS là rất quan trọng để đảm bảo rằng các phần tử trên trang web của bạn được hiển thị đúng cách trên mọi thiết bị và kích thước màn hình. Tuy nhiên, với nhiều đơn vị CSS khác nhau như ch, em, rem, vw, vh, vmin, và vmax, có thể gây khó khăn cho những người mới bắt đầu hoặc những ai chưa quen với chúng. Trong bài viết này, chúng ta sẽ khám phá từng đơn vị CSS, hiểu rõ cách hoạt động và cách áp dụng chúng hiệu quả để tạo ra các thiết kế web linh hoạt và đáp ứng tốt. Cùng tìm hiểu để nâng cao kỹ năng thiết kế web của bạn!

1. `ch` (Character Unit)

Mô tả

Đơn vị ch dựa trên kích thước của ký tự ‘0’ trong font chữ hiện tại. Nó thường được dùng để căn chỉnh chiều rộng của các phần tử theo kích thước của ký tự ‘0’.

Ví dụ

.box {
  width: 20ch; /* Kích thước bằng 20 ký tự '0' */
  border: 1px solid black;
}

Giải thích: Nếu font chữ của bạn có ký tự ‘0’ rộng 8px, thì .box sẽ có chiều rộng là 160px (20 ký tự ‘0’ x 8px).

2. `em` (Relative to Element’s Font Size)

Mô tả

Đơn vị em dựa trên kích thước font chữ của phần tử hiện tại. Điều này có nghĩa là nếu bạn đặt kích thước của phần tử cha, kích thước của các phần tử con sẽ tính theo đơn vị em tương ứng.

Ví dụ

.container {
  font-size: 16px;
}

.box {
  width: 10em; /* Kích thước bằng 10 lần kích thước font chữ của .container */
  border: 1px solid black;
}

Giải thích: Nếu kích thước font chữ của .container là 16px, thì chiều rộng của .box sẽ là 160px (10 em x 16px).

3. `rem` (Relative to Root Element’s Font Size)

Mô tả

Đơn vị rem dựa trên kích thước font chữ của phần tử gốc (thường là <html>). Đây là một đơn vị tuyệt đối hơn so với em, vì nó không bị ảnh hưởng bởi các phần tử cha.

Ví dụ

html {
  font-size: 16px;
}

.box {
  width: 5rem; /* Kích thước bằng 5 lần kích thước font chữ của  */
  border: 1px solid black;
}

Giải thích: Nếu kích thước font chữ của <html> là 16px, thì chiều rộng của .box sẽ là 80px (5 rem x 16px).

4. `vw` (Viewport Width)

Mô tả

Đơn vị vw dựa trên chiều rộng của viewport. 1vw bằng 1% của chiều rộng viewport.

Ví dụ

.box {
  width: 50vw; /* Kích thước bằng 50% chiều rộng của viewport */
  border: 1px solid black;
}

Giải thích: Nếu chiều rộng của viewport là 1000px, thì chiều rộng của .box sẽ là 500px (50% của 1000px).

5. `vh` (Viewport Height)

Mô tả

Đơn vị vh dựa trên chiều cao của viewport. 1vh bằng 1% của chiều cao viewport.

Ví dụ

.box {
  height: 40vh; /* Kích thước bằng 40% chiều cao của viewport */
  border: 1px solid black;
}

Giải thích: Nếu chiều cao của viewport là 800px, thì chiều cao của .box sẽ là 320px (40% của 800px).

6. `vmin` (Viewport Minimum)

Mô tả

Đơn vị vmin dựa trên chiều rộng hoặc chiều cao của viewport, lấy giá trị nhỏ hơn trong hai chiều.

Ví dụ

.box {
  width: 10vmin; /* Kích thước bằng 10% của chiều nhỏ hơn giữa chiều rộng và chiều cao của viewport */
  height: 10vmin;
  border: 1px solid black;
}

Giải thích: Nếu chiều rộng của viewport là 1000px và chiều cao là 800px, 10vmin sẽ bằng 80px (10% của chiều cao).

7. `vmax` (Viewport Maximum)

Mô tả

Đơn vị vmax dựa trên chiều rộng hoặc chiều cao của viewport, lấy giá trị lớn hơn trong hai chiều.

Ví dụ

.box {
  width: 10vmax; /* Kích thước bằng 10% của chiều lớn hơn giữa chiều rộng và chiều cao của viewport */
  height: 10vmax;
  border: 1px solid black;
}

Giải thích: Nếu chiều rộng của viewport là 1000px và chiều cao là 800px, 10vmax sẽ bằng 100px (10% của chiều rộng).

Hiểu và sử dụng đúng các đơn vị CSS là yếu tố quan trọng để tạo ra các thiết kế web linh hoạt và đáp ứng nhu cầu của người dùng. Từ các đơn vị tuyệt đối như ch, em, và rem, đến các đơn vị dựa trên viewport như vw, vh, vmin, và vmax, mỗi đơn vị đều có những ứng dụng và lợi ích riêng biệt.

Việc nắm vững các đơn vị này không chỉ giúp bạn kiểm soát kích thước các phần tử một cách chính xác mà còn tối ưu hóa trải nghiệm người dùng trên các thiết bị và kích thước màn hình khác nhau. Hãy thử áp dụng các đơn vị này trong dự án của bạn để thấy sự khác biệt trong cách các yếu tố trên trang web của bạn được hiển thị.

Nếu bạn có bất kỳ câu hỏi nào về việc sử dụng các đơn vị CSS hoặc cần thêm thông tin, đừng ngần ngại để lại câu hỏi hoặc chia sẻ ý kiến của bạn. Cảm ơn bạn đã đọc và chúc bạn thành công trong việc thiết kế giao diện web hiệu quả!