Đơn vị vw và vh là gì?
Còn gọi: theo viewport, vw, vh, vw vh, đơn vị vw
Vw và vh là đơn vị CSS tính theo kích thước viewport: 1vw bằng 1% chiều rộng, 1vh bằng 1% chiều cao vùng hiển thị của trình duyệt.
Hiểu kỹ hơn
Đơn vị này hay dùng để làm hero section cao đúng một màn hình (100vh), hoặc cỡ chữ co giãn theo bề ngang màn hình. Trên điện thoại có một vấn đề quen thuộc: thanh địa chỉ của trình duyệt ẩn hiện khi cuộn làm chiều cao thay đổi, nên khối 100vh có thể bị che mất phần dưới. CSS hiện đại bổ sung các đơn vị svh (theo viewport nhỏ nhất, khi thanh trình duyệt hiện), lvh (lớn nhất) và dvh (thay đổi động) để xử lý chuyện này, và đã được các trình duyệt lớn hỗ trợ. Khi thiết kế hero full màn hình, designer nên kiểm tra trên màn hình thấp như laptop 13 inch và điện thoại nhỏ để nút kêu gọi không bị đẩy xuống dưới. Cỡ chữ chỉ dùng vw sẽ quá nhỏ trên mobile, nên kết hợp với clamp().
