Giá như tôi biết "vh" & "vw" là vợ chồng!
Tiêu đề viết cho vui vậy chứ 2 chúng nó ly dị lâu rồi, đứa thì đi theo anh chiều cao vh height, đứa thì cưới chị chiều ngang vw awidth. 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. Trước khi có ...
Tiêu đề viết cho vui vậy chứ 2 chúng nó ly dị lâu rồi, đứa thì đi theo anh chiều cao vh height, đứa thì cưới chị chiều ngang vw awidth.
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.
Trước khi có cặp vợ chồng này tôi thường sử dụng jquery để tìm kích thước của trình duyệt rồi tùy biến. Việc này khá là phiền và phải sửa nhiều chổ.
Đọc tới đây chắc các bạn sẽ cảm thấy sao không dùng %, xin nói sơ qua 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ó.
<!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>
Vì thế bạn phải kiểm tra cấp cha, chú, bác, thím, dì rồi mới tới đối tượng mà bạn qui định.
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.
<!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>
Link demo:
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
- ...
Túm lại
Cặp vợ chồng vh vw này thường xử lý những banner những slogan mà sếp, 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.
