Đơn vị CSS - Sự khác biệt giữa vh / vw và% là gì?

138

Tôi vừa tìm hiểu về một đơn vị CSS mới và không phổ biến. vhvà vwđo tỷ lệ phần trăm chiều cao và chiều rộng của khung nhìn tương ứng.

Tôi đã xem xét câu hỏi này từ Stack Overflow, nhưng nó làm cho các đơn vị trông thậm chí giống nhau hơn.

Đơn vị vw và vh hoạt động như thế nào

Câu trả lời cụ thể nói

vw và vh là một tỷ lệ phần trăm của chiều rộng và chiều cao cửa sổ, tương ứng: 100vw là 100% chiều rộng, 80vw là 80%, v.v.

Điều này có vẻ giống như %đơn vị, là phổ biến hơn.

Trong Công cụ dành cho nhà phát triển, tôi đã thử thay đổi các giá trị từ vw / vh thành% và viceversa và nhận được kết quả tương tự.

Có điểm khác biệt gì giữa hai thứ này không? Nếu không, tại sao các đơn vị mới này được giới thiệu CSS3?

css viewport-units

— Richard Hamilton
nguồn

7

Những gì vw / vh làm là loại bỏ sự phụ thuộc vào bất kỳ cha mẹ nào và cho phép định cỡ dựa trên kích thước khung nhìn.

— Nhãn dán

2

Bạn đọc, câu trả lời của IanC cũng có thể cứu ngày của bạn, hãy chắc chắn kiểm tra nó.

— Skippy le Grand Gourou

167

100%có thể là 100%chiều cao của bất cứ điều gì. Ví dụ, nếu tôi có cha mẹ divđó là 1000pxcao, và một đứa trẻ divmà là ở 100%chiều cao, sau đó đứa trẻ đó divcó thể về mặt lý thuyết có nhiều cao hơn chiều cao của khung nhìn, hoặc nhỏ hơn nhiều so với chiều cao của khung nhìn, mặc dù điều đó divđược đặt ở 100%chiều cao .

Thay vào đó, nếu tôi divđặt đứa trẻ đó vào 100vh, thì nó sẽ chỉ lấp đầy 100%chiều cao của khung nhìn và không nhất thiết phải là cha mẹ div.

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

Mở rộng đoạn trích

— Chùm tia Josh
nguồn

Tôi đã có một thanh bên được lồng trong một "hàng" bootstrap và tôi không thể đặt kích thước trang đầy đủ ngay cả sau khi đặt chiều cao: 100%. Những gì làm việc cho tôi là 100vh

— raghav710

27

Tôi biết câu hỏi rất cũ và @Josh Beam đã giải quyết sự khác biệt lớn nhất, nhưng vẫn còn một câu hỏi khác:

Giả sử bạn có một <div>đứa con trực tiếp <body>mà bạn muốn lấp đầy toàn bộ khung nhìn, vì vậy bạn sử dụng width: 100vw; height: 100vh;. Tất cả đều hoạt động giống như width: 100%; height: 100vh;cho đến khi bạn thêm nhiều nội dung và một thanh cuộn dọc xuất hiện. Vì vwtài khoản cho thanh cuộn là một phần của chế độ xem, width: 100vw;sẽ lớn hơn một chút width: 100%;. Sự khác biệt nhỏ này kết thúc bằng việc thêm một thanh cuộn ngang (cần thiết cho người dùng để thấy chiều rộng thêm nhỏ đó) và do đó, chiều cao cũng sẽ khác một chút trong cả hai trường hợp.

Điều đó phải được xem xét khi quyết định sử dụng cái nào, ngay cả khi kích thước phần tử cha giống với kích thước khung nhìn tài liệu.

Thí dụ:

Sử dụng width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Mở rộng đoạn trích

Sử dụng width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Mở rộng đoạn trích

— IanC
nguồn

2

CSS body { overflow: hidden }sẽ khiến các thanh cuộn không được hiển thị.

— Dave F

2

Cảm ơn câu trả lời và ví dụ mã của bạn, @IanC. Nó đã giúp tôi rất nhiều. Một sự làm rõ: Tôi tin rằng bạn có nghĩa là "thanh cuộn" khi bạn viết "thanh bên".

Dưới đây là một số cuộc thảo luận liên quan về các đơn vị khung nhìn đếm các thanh cuộn mà tôi cũng thấy hữu ích:

Thông số W3C cho các đơn vị vw, vh, vmin, vmax ("độ dài phần trăm khung nhìn") cho biết "mọi thanh cuộn được cho là không tồn tại".

Rõ ràng Firefox trừ chiều rộng thanh cuộn từ 100vw, như nhận xét của @ Nolonar ở Chênh lệch giữa Chiều rộng: 100% và chiều rộng: 100vw? quan sát, trích dẫn "Tôi có thể sử dụng".

Tôi có thể sử dụng , có lẽ do căng thẳng với thông số kỹ thuật (?), Cho biết tất cả các trình duyệt khác ngoài Firefox hiện tại "không chính xác" coi 100vw là toàn bộ chiều rộng của trang bao gồm thanh cuộn dọc.

— Slack Undertow
nguồn

1

các đơn vị vw (view-width) và vh (view-height) có liên quan đến kích thước cổng xem, trong đó 100vw hoặc vh là 100% chiều rộng / chiều cao của cổng view.

Ví dụ: nếu cổng xem rộng 1600px và bạn chỉ định một cái gì đó là 2vw, thì nó sẽ tương đương với 2% chiều rộng của cổng xem hoặc 32px.

% unit luôn dựa trên chiều rộng phần tử cha của phần tử hiện tại

0

Có một sự khác biệt không nhất thiết phải được nêu ra. 100vw bao gồm chiều rộng của thanh scrool, trong khi 100% không bao gồm nó. Đó là một sự khác biệt nhỏ, nhưng quan trọng khi làm thiết kế.

1

Câu trả lời của IanC không. "Vì tài khoản vw cho thanh cuộn là một phần của chế độ xem, chiều rộng: 100vw; sẽ lớn hơn một chút so với chiều rộng: 100%;."

— j08691