Giá như tôi biết "vh" & "vw" là vợ chồng!
CSS3
41
tuds
22
White

tuds viết ngày 11/05/2016

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 width.

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.

alt text

Còn đối với vhvw 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.

alt text

<!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.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

tuds

34 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
46 8
0.1 Intro Trong series này các bạn sẽ được tiếp cận từ đầu đến đích việc của một webiste tĩnh được làm như thế lào. Hứa hẹn nhiều điều thầm kính t...
tuds viết 2 năm trước
46 8
White
44 5
Dạo gần đây nhà mình hay mất mạng, mà ai cũng biết rồi dân IT, Design, Gaming, XXX, mà không có internet thì hỡi ơi cứ như là sống ở thời kì đồ đá....
tuds viết hơn 1 năm trước
44 5
White
21 2
Nhiều khi đọc mấy cái bài tuyển dụng họ viết, biết gulp, biết bootstrap, biết js biết biết ... là một lợi thế. Nhiều lúc tôi cũng không hiểu nghĩa...
tuds viết 2 năm trước
21 2
Bài viết liên quan
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
White
17 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết hơn 2 năm trước
17 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
34 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!