• Alo88.COM! là Blog cá nhân nhằm chia sẻ những kiến thức, kinh nghiệm đã làm trong các dự án về các lĩnh vực: Lập trình website, quản trị mạng, web services, server cloud, Amazon Web Services, thiết kế đồ họa, domain-hosting.
    Hy vọng sẽ hữu ích cho các bạn

Đơn vị "vh" & "vw" trong CSS

mediavn

Administrator
Staff member
#1
Đơn vị "vh" & "vw" trong CSS thực chất là đơn vị đo width và height tỷ lệ của chúng là:
1 vw = 1% chiều ngang của trình duyệt.
1 vh = 1% chiều cao của trình duyệt.

Tức là nó cũng sẽ bằng 100% nếu bạn cho nó là 100vh hoặc 100vw.
Phần tử vh bằng 1/100 chiều cao của khung nhìn.
Ví dụ: nếu chiều cao của trình duyệt là 900px, 1vh sẽ đánh giá là 9px. Tương tự, nếu chiều rộng khung nhìn là 750px, 1vw sẽ đánh giá đến 7.5px.

Một cách rất đơn giản để thực hiện các trang trình bày có chiều cao đầy đủ hoặc gần chiều cao toàn bộ có thể đạt được bằng một dòng CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html {height: 100%;}
body {height: 50%;}
.vh {
height: 100%;
background-color:#eeddff;
}
</style>
</head>
<body>
<div class="vh">
vh = 50%
</div>
</body>
</html>
Đọc tới đây chắc các bạn sẽ cảm thấy sao không dùng %, sự khác biệt em % nó cũng tương tự như trên nhưng nó khác chút đỉnh là nó thừa hưởng cấp cha gần nhất của nó.
Vì thế bạn phải kiểm tra cấp cha rồi mới tới đối tượng mà bạn qui định.

don-vi-css1.png



Còn đối với vh và vw nó thừa hưởng từ cấp root(html) tức là bạn cứ hiểu cái trình duyệt của bạn hay điện thoại bạn rộng bao nhiêu thì nó sẽ lấy bấy nhiêu đó làm % để tính cho đối tượng mà bạn muốn qui định.


html100.png


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html {height: 100%;}
body {height: 50%;}
.vh {
height: 100vh;
background-color:#eeddff;
}
</style>
</head>
<body>
<div class="vh">
vh = 100%
</div>
</body>
</html>
Khi làm responsive chắc chắn là người nào cũng đã từng rê chuột kéo kéo thả thả để xem được kết quả mà mình vừa tùy chỉnh css. Nhưng thật sự có mấy ai kéo chiều cao của nó rồi xem kết quả không?

Ví dụ giờ bạn nắm phần cuối trình duyệt rồi kéo nhỏ trình duyệt lại thì chuyện gì xuất hiện, 1 thanh scroll đó là cách khá tốt để giải quyết. Nhưng nếu bạn nghĩ thử nếu bạn làm chuyện đó nhưng font-size của bạn tự thu nhỏ theo chẳng hạn, tôi nghĩ nó khá thú vị hơn là thằng scroll.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html {height: 100%;}
body {height: 50%;}
.vh {
height: 100vh;
background-color:#eeddff;
}
h1 {
margin: 0;
font-size: 20vh;
}
</style>
</head>
<body>
<div class="vh">
<h1>
font-size 20vh
</h1>
</div>
</body>
</html>
Khi nào thì bạn dùng nó:
  • Khi sếp bảo canh cho cái banner này full screen.
  • Cái font-size này khi responsive anh muốn chú làm cho nó co giản được.
  • Khi quay ngang, quay đứng màn hình các thiết bị smartphone mà font-size, img, và một số thứ khác cũng thay đổi kích cỡ theo
  • ...
Đơn vị vh vw này trong css thường xử lý những banner những slogan mà khách hàng hoặc một design khó chịu nào đó không muốn mất đi những nội dung đáng giá của họ trên nhiều thiết bị khác nhau.

Trên khung màn hình nhỏ bé của mobile, tablet hoặc to lớn như desktop bạn chỉ cần qui định 1 vài chổ là đã có thể responsive ngon lành khi kéo ngang, thu nhỏ mà không sợ phải tùy chỉnh nhiều vị trí font-size trong css

Riêng tôi, tôi gọi nó là responsive theo chiều cao.


Bài viết tham khảo trên kipalog​
 

Bình Luận