CSS Units (đơn vị đo lường trong CSS) là các đơn vị xác định kích thước của các thành phần trên trang web. Hiểu rõ về các đơn vị này sẽ giúp bạn linh hoạt hơn trong việc thiết kế giao diện, làm cho trang web dễ dàng thích ứng với nhiều loại màn hình và thiết bị khác nhau. Bài viết này sẽ giúp bạn nắm rõ các loại đơn vị đo lường trong CSS, bao gồm đơn vị tuyệt đối, đơn vị tương đối và các ví dụ minh họa cụ thể.

1. Đơn vị tuyệt đối

Đơn vị tuyệt đối là các đơn vị có kích thước cố định, không thay đổi dựa vào yếu tố khác. Các đơn vị này được sử dụng khi bạn muốn kích thước phần tử cố định, bất kể môi trường hiển thị.

1.1 Các đơn vị tuyệt đối phổ biến

  • px (pixel): Đơn vị đo lường phổ biến nhất, đại diện cho một điểm trên màn hình. Thường được sử dụng cho các kích thước nhỏ như đường viền, chữ.
css
.box { width: 100px; height: 100px; border: 1px solid black; }
  • pt (point): Đơn vị thường dùng trong in ấn, 1pt = 1/72 inch.
css
.text { font-size: 12pt; }
  • cm (centimeter) và mm (millimeter): Đơn vị chính xác hơn, thường dùng trong in ấn thay vì màn hình.
css
.container { width: 10cm; }
  • in (inch): Một inch tương đương với 96px.
css
.page { height: 8.5in; }

1.2 Khi nào nên dùng đơn vị tuyệt đối

Đơn vị tuyệt đối hữu ích trong in ấn hoặc trong các thiết kế cần kích thước cố định, ví dụ như thiết kế tài liệu hoặc trang PDF. Tuy nhiên, với giao diện người dùng trên các thiết bị khác nhau, đơn vị tuyệt đối có thể gây ra hạn chế về tính linh hoạt.

2. Đơn vị tương đối

Đơn vị tương đối thay đổi dựa trên kích thước của các yếu tố khác, giúp giao diện linh hoạt và thích ứng tốt hơn trên nhiều loại màn hình.

2.1 Các đơn vị tương đối phổ biến

  • em: Đơn vị này phụ thuộc vào kích thước chữ của phần tử cha. 1em bằng với kích thước chữ hiện tại của phần tử.
css
.text { font-size: 2em; /* Gấp đôi kích thước chữ của phần tử cha */ }
  • rem (root em): Đơn vị này phụ thuộc vào kích thước chữ của phần tử gốc (thường là html). Điều này giúp dễ dàng kiểm soát kích thước nhất quán trên toàn bộ trang.
css
html { font-size: 16px; } .text { font-size: 1.5rem; /* Bằng 24px */ }
  • % (percent): Đơn vị tỷ lệ phần trăm. Thường dùng để xác định kích thước dựa trên phần tử cha hoặc kích thước của viewport (khung nhìn).
css
.container { width: 80%; /* Chiếm 80% chiều rộng của phần tử cha */ }
  • vw (viewport width) và vh (viewport height): Đơn vị dựa trên kích thước của viewport. 1vw là 1% chiều rộng của viewport, và 1vh là 1% chiều cao của viewport.
css
.full-screen { width: 100vw; height: 100vh; }
  • vmin và vmax: Đơn vị linh hoạt hơn, sử dụng giá trị nhỏ nhất (vmin) hoặc lớn nhất (vmax) giữa vw và vh.
css
.square { width: 50vmin; height: 50vmin; }

2.2 Khi nào nên dùng đơn vị tương đối

Đơn vị tương đối là lựa chọn hàng đầu cho các thiết kế web hiện đại, giúp tạo ra các giao diện phản hồi linh hoạt cho nhiều kích thước màn hình. Các đơn vị như %, vw, vh, em, và rem được ưu tiên trong thiết kế responsive (phản hồi).

3. Ví dụ minh họa về cách sử dụng CSS Units

3.1 Thiết kế giao diện linh hoạt với đơn vị tương đối

Giả sử bạn muốn tạo một trang có nội dung chính chiếm 80% chiều rộng của màn hình và căn giữa.

html
Thử online
<div class="main-content">
    Nội dung chính ở đây.
</div>
css
.main-content {
    width: 80%;
    margin: 0 auto;
    font-size: 1.5rem; /* Cỡ chữ theo kích thước phần tử gốc */
    padding: 20px;
}

Trong ví dụ trên:

  • .main-content có chiều rộng chiếm 80% của phần tử cha, giúp căn chỉnh nội dung một cách dễ dàng.
  • Sử dụng 1.5rem làm kích thước chữ giúp phần tử đồng nhất trên các thiết bị và trình duyệt.

3.2 Sử dụng vmin và vmax để tạo giao diện thích ứng

Giả sử bạn muốn tạo một khối vuông luôn chiếm 50% kích thước nhỏ nhất của viewport (khung nhìn), giúp giữ nguyên hình dạng vuông.

html
Thử online
<div class="responsive-box">
    Hộp linh hoạt
</div>
css
.responsive-box {
    width: 50vmin;
    height: 50vmin;
    background-color: #007acc;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

Trong ví dụ này:

  • 50vmin giúp khối vuông luôn có chiều rộng và chiều cao bằng nhau, chiếm 50% của kích thước nhỏ nhất của viewport.
  • Điều này làm cho khối giữ nguyên hình dạng và cân đối trên mọi thiết bị.

4. Kết luận

CSS Units là một phần quan trọng trong việc thiết kế và định dạng giao diện người dùng. Đơn vị tuyệt đối rất hữu ích trong các trường hợp cần độ chính xác và ổn định, trong khi đơn vị tương đối và đơn vị viewport giúp giao diện linh hoạt, thích ứng với nhiều kích thước màn hình. Hiểu rõ cách sử dụng từng loại đơn vị sẽ giúp bạn tạo nên những thiết kế responsive, hiệu quả và hấp dẫn.