Tìm hiểu các đơn vị đo trong CSS

CSS cung cấp nhiều đơn vị đo khác nhau để xác định kích thước của các phần tử trên trang web. Hiểu rõ về các đơn vị này sẽ giúp bạn tạo ra các thiết kế responsive và linh hoạt hơn.

1. Đơn vị đo tuyệt đối (Absolute Units)

1.1. Pixel (px)

• Đơn vị cơ bản nhất trong CSS
• 1px tương đương với một điểm trên màn hình
• Không thay đổi kích thước khi thay đổi kích thước màn hình
• Thường được sử dụng cho các đường viền và kích thước cố định

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

1.2. Các đơn vị in ấn

• in: inch (1in = 96px)
• cm: centimet
• mm: milimet
• pt: point (1pt = 1/72 inch)
• pc: pica (1pc = 12pt)

2. Đơn vị đo tương đối (Relative Units)

2.1. Phần trăm (%)

• Tương đối với kích thước của phần tử cha
• Thường được sử dụng cho layout responsive

.container {
    width: 80%;
    margin: 0 auto;
}

2.2. Viewport Units

• vw: 1% chiều rộng viewport
  • Ví dụ: width: 50vw (chiếm 50% chiều rộng màn hình)
• vh: 1% chiều cao viewport
  • Ví dụ: height: 30vh (chiếm 30% chiều cao màn hình)
• vmin: 1% của kích thước nhỏ nhất giữa chiều rộng và chiều cao viewport
  • Ví dụ: width: 20vmin (chiếm 20% kích thước nhỏ hơn giữa chiều rộng và chiều cao viewport)
• vmax: 1% của kích thước lớn nhất giữa chiều rộng và chiều cao viewport
  • Ví dụ: height: 50vmax (chiếm 50% kích thước lớn hơn giữa chiều rộng và chiều cao viewport) Lưu ý:
• Trên desktop, vw và vh khá ổn định.
• Mobile thì KHÔNG ổn định, vì:
  • Thanh điều hướng, thanh địa chỉ URL có thể làm thay đổi viewport thật sự.
  • Ví dụ: 100vh đôi khi không đủ để che hết màn hình điện thoại vì trình duyệt trừ đi thanh công cụ.

.header {
    height: 100vh;
    width: 100vw;
}

Lưu ý:

• Trên web hiện đại, chủ yếu dùng px và %.
• pt, cm, in chủ yếu dành cho xuất bản in ấn (PDF, in ra giấy).

2.3. Đơn vị viewport hiện đại

Các đơn vị viewport mới được giới thiệu để giải quyết các vấn đề với viewport trên thiết bị di động: (ra đời từ CSS Viewport Level 4, hỗ trợ tốt từ iOS 16.0+, Android Chrome mới)

• svw, svh: Small viewport width/height

  • Dựa trên kích thước viewport nhỏ nhất khi thanh địa chỉ và thanh công cụ trình duyệt hiển thị
  • Hữu ích cho việc đảm bảo nội dung luôn hiển thị đầy đủ

• lvw, lvh: Large viewport width/height

  • Dựa trên kích thước viewport lớn nhất khi thanh địa chỉ và thanh công cụ trình duyệt ẩn
  • Phù hợp cho các hiệu ứng full-screen

• dvw, dvh: Dynamic viewport width/height

  • Tự động điều chỉnh giữa small và large viewport
  • Giải pháp linh hoạt nhất cho responsive design

Lưu ý:

• dvh (Dynamic Viewport Height) rất hữu ích cho mobile vì nó thay đổi linh hoạt theo việc hiện/tắt thanh URL, bàn phím ảo.
• Nếu muốn chiếm toàn màn hình trên mobile một cách thực sự (kể cả lúc mở thanh URL), dùng 100dvh tốt hơn 100vh.

/* Ví dụ sử dụng các đơn vị viewport hiện đại */
.full-screen {
    /* Sử dụng dynamic viewport để đảm bảo hiển thị tốt trên mọi thiết bị */
    height: 100dvh;
    width: 100dvw;
}

.fixed-header {
    /* Sử dụng small viewport để đảm bảo header luôn hiển thị */
    height: 10svh;
}

.expandable-section {
    /* Sử dụng large viewport cho các phần tử có thể mở rộng */
    max-height: 90lvh;
}

2.4. Đơn vị tương đối với font chữ

• em: Dựa trên font-size của phần tử cha
  • Ví dụ: width: 5em (5 lần kích cỡ chữ của cha)
• rem: Dựa trên font-size của phần tử gốc (html)
  • Ví dụ: font-size: 1.5rem (1.5 lần kích cỡ chữ của gốc)
• ch: Chiều rộng của ký tự "0"
• ex: Chiều cao của ký tự "x"

html {
    font-size: 16px;
}

.text {
    font-size: 1.5em; /* 24px */
    margin: 2rem; /* 32px */
}

3. Các đơn vị đo mới trong CSS

3.1. Container Units

• cqw: 1% chiều rộng container
• cqh: 1% chiều cao container
• cqi: 1% kích thước inline của container
• cqb: 1% kích thước block của container
• cqmin: 1% của kích thước nhỏ nhất
• cqmax: 1% của kích thước lớn nhất

@container (min-width: 300px) {
    .card {
        width: 50cqw;
    }
}

4. Cách chọn đơn vị đo phù hợp

4.1. Khi nào sử dụng đơn vị tuyệt đối?

• Khi cần kích thước cố định
• Cho các đường viền và bóng đổ
• Cho các phần tử không cần responsive

4.2. Khi nào sử dụng đơn vị tương đối?

• Khi thiết kế responsive
• Cho layout linh hoạt
• Cho typography và spacing
• Khi cần tỷ lệ tương đối giữa các phần tử

5. Best Practices

1. Sử dụng rem cho font-size và spacing
2. Sử dụng % cho layout responsive
3. Sử dụng vw/vh cho các phần tử full-screen
4. Kết hợp các đơn vị đo một cách linh hoạt
5. Tránh sử dụng px cho font-size để đảm bảo khả năng truy cập

Tóm tắt cách chọn dùng:

Kết luận

Hiểu và sử dụng đúng các đơn vị đo trong CSS là kỹ năng quan trọng để tạo ra các thiết kế web responsive và linh hoạt. Mỗi đơn vị đo đều có mục đích sử dụng riêng, và việc kết hợp chúng một cách hợp lý sẽ giúp bạn tạo ra các giao diện người dùng tốt hơn.