Sự khác nhau giữa VH (viewport height), VW (viewport width) và % trong CSS

Trong CSS, các đơn vị VH, VW và % đều được sử dụng để xác định kích thước của phần tử, nhưng chúng có sự khác biệt về cách sử dụng trong một số trường hợp.

Viewport: là phần hiển thị nội dung của website, không bao gồm address bar, bookmark bar…

1. VH, VW

• VH là đơn vị đo biểu thị phần trăm chiều cao của viewport, 100vh = 100% kích thước chiều cao viewport
• VW là đơn vị đo biểu thị phần trăm chiều rộng của viewport, 100vw = 100% kích thước chiều rộng của viewport
• Chú ý: VH và VW sẽ tính bao gồm cả kích thước của scroll bar width hoặc height.

Ví dụ: Nếu bạn set chiều cao cho một phần tử là 50vh, chiều cao của phần tử là 50% kích thước của viewport. Tương tự như vậy, nếu bạn set chiều rộng cho một phần tử là 30vw, chiều rộng của phần tử là 30% chiều rộng của viewport.

Các đơn vị này hữu ích để tạo responsive web vì chúng liên quan trực tiếp đến kích thước của viewport

2. Đơn vị %

• Đơn vị % trong CSS biểu thị % kích thước phần tử dựa trên kích thước của phần tử cha
• Nếu một element sử dụng đơn vị %, kích thước phần tử đó sẽ tham chiếu theo kích thước của phần tử chứa nó.
• Đơn vị % thường được sử dụng để tạo layout web khi mà kích thước của phần tử đó có liên quan tới phần tử cha chứa nó.

Ví dụ: nếu set width của phần tử là 50%, kích thước phần tử đó sẽ là 50% kích thước width của phần tử cha chứa nó.

Đơn vị % thường được sử dụng để tạo layout khi kích thước của phần tử tham chiếu dựa trên kích thước phần tử chứa nó. Tuy nhiên, cần lưu ký rằng chúng có thể mang tới kết quả không mong muốn nếu kích thước của phần tử cha không được xác định rõ hoặc nếu các phần tử lồng nhau cùng sử dụng đơn vị %.

Kết luận

• Đơn vị VH, VW là đơn vị sẽ tham chiếu theo kích thước của viewport và chúng hữu ích trong trường hợp khi tạo layout responsive thay đổi theo kích thước viewport của browser.
• Đơn vị % là đơn vị tham chiếu theo kích thước của phần tử cha và thường được sử dụng để tạo bố cục trong các vùng chứa cụ thể

Khi lựa chọn đơn vị đo trong CSS cần cân nhắc tới các trường hợp và cân nhắc dựa trên kết quả mà bạn muốn đạt được để có thể có được một bố cục website tốt nhất với code tối ưu nhất.

Bài viết được lược dịch theo:
Difference between Viewport’s height(vh)/width(vw) and Percentage Units(%) in CSS