Khám Phá Đơn Vị vh/vm Trong CSS

Question

Phú Huỳnh Thiên · Accepted Answer

Trong thiết kế web, việc sử dụng các đơn vị đo lường chính xác là rất quan trọng để tạo ra các bố cục linh hoạt và đáp ứng. Hai trong số các đơn vị đó là vh và vw, thường được sử dụng để thiết kế giao diện người dùng thân thiện trên các thiết bị khác nhau. Trong bài viết này, chúng ta sẽ khám phá chi tiết về vh và vw, cũng như cách sử dụng chúng hiệu quả trong CSS.
1. Định Nghĩa vh và vw
vh (Viewport Height): Đơn vị này đại diện cho chiều cao của viewport (khu vực hiển thị của trình duyệt) và một đơn vị vh tương đương với 1% chiều cao của viewport. Ví dụ, nếu chiều cao của viewport là 1000px, thì 1vh sẽ bằng 10px.
vw (Viewport Width): Tương tự như vh, đơn vị này đại diện cho chiều rộng của viewport, với 1vw tương đương với 1% chiều rộng của viewport. Nếu chiều rộng của viewport là 1000px, thì 1vw sẽ bằng 10px.
Ví dụ:
Nếu bạn có một viewport có chiều cao 800px và chiều rộng 1200px:
1vh = 8px (1% của 800px)
1vw = 12px (1% của 1200px)
2. Sử Dụng vh và vw Trong CSS
Các đơn vị này thường được sử dụng để thiết lập chiều cao, chiều rộng, và các thuộc tính khác của phần tử. Dưới đây là một số ví dụ về cách sử dụng chúng.
2.1. Thiết Lập Chiều Cao và Chiều Rộng
.fullscreen {
    width: 100vw;  /* Chiều rộng 100% viewport */
    height: 100vh; /* Chiều cao 100% viewport */
    background-color: #3498db; /* Màu nền */
}
2.2. Thiết Lập Padding và Margin
.box {
    width: 50vw;    /* Chiều rộng 50% viewport */
    height: 50vh;   /* Chiều cao 50% viewport */
    margin: 25vh auto; /* Căn giữa theo chiều dọc */
    background-color: #2ecc71; /* Màu nền */
    text-align: center; /* Căn giữa nội dung */
}
2.3. Font Size
.text {
    font-size: 2vw; /* Kích thước font dựa trên chiều rộng viewport */
}
3. Ưu Điểm Của Việc Sử Dụng vh và vw
Tính Linh Hoạt: Sử dụng vh và vw giúp tạo ra các thiết kế linh hoạt, dễ dàng thích ứng với nhiều kích thước màn hình khác nhau, từ điện thoại di động đến máy tính để bàn.
Tạo Bố Cục Đáp Ứng: Khi thiết kế các bố cục đáp ứng, việc sử dụng vh và vw giúp đảm bảo rằng các phần tử luôn giữ tỷ lệ chính xác, không bị méo mó khi thay đổi kích thước viewport.
Thiết Kế Toàn Màn Hình: Với vh và vw, bạn có thể dễ dàng tạo các phần tử toàn màn hình mà không cần phải tính toán chiều cao và chiều rộng của viewport theo pixel.
4. Lưu Ý Khi Sử Dụng vh và vw
Khả Năng Tương Thích: Đảm bảo rằng bạn kiểm tra khả năng tương thích của các đơn vị này trên các trình duyệt khác nhau, đặc biệt là trên các thiết bị di động.
Tính Toán Chiều Cao: Trong một số tình huống, việc sử dụng vh có thể gây ra các vấn đề về trải nghiệm người dùng, đặc biệt khi thanh địa chỉ của trình duyệt thay đổi kích thước viewport. Điều này có thể làm cho nội dung không hiển thị chính xác. Để khắc phục, bạn có thể sử dụng các đơn vị khác hoặc kết hợp với JavaScript để điều chỉnh kích thước.
Kết Luận
Việc sử dụng vh và vw trong CSS là một phương pháp mạnh mẽ để tạo ra các thiết kế linh hoạt và đáp ứng. Các đơn vị này giúp bạn dễ dàng kiểm soát kích thước của phần tử dựa trên kích thước của viewport, mang đến cho người dùng trải nghiệm mượt mà và thoải mái trên nhiều thiết bị khác nhau.