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

Tôi vừa học về một đơn vị CSS mới và không phổ biến. vh và vw đo tỷ lệ chiều cao và chiều rộng của chế độ xem tương ứng.Đơn vị CSS - Sự khác nhau giữa vh/vw và% là gì?

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

How does vw and vh unit works

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 cửa sổ và chiều cao, tương ứng: 100vw là 100% chiều rộng, 80vw là 80%, vv

Điều này có vẻ giống hệt như đơn vị %, 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ó sự khác biệt nào giữa hai loại này không? Nếu không, tại sao những đơn vị mới này được giới thiệu đến CSS3?

Nguồn

2015-06-25 Richard Hamilton

Điều gì vw/vh làm là loại bỏ sự phụ thuộc vào bất kỳ phụ huynh nào và cho phép định kích thước dựa trên kích thước khung nhìn. – Stickers

Người đọc, [câu trả lời của IanC] (https://stackoverflow.com/a/47652830/812102) cũng có thể tiết kiệm trong ngày của bạn, hãy chắc chắn kiểm tra nó. –

100% có thể là 100% chiều cao của bất kỳ thứ gì. Ví dụ: nếu tôi có số phụ huynh là div cao hơn 1000px và con là div có chiều cao 100% thì con đó div về mặt lý thuyết có thể cao hơn nhiều so với chiều cao của chế độ xem hoặc nhỏ hơn chiều cao của chế độ xem, mặc dù rằng div được đặt ở độ cao 100% chiều cao.

Nếu tôi thay vì làm cho rằng bộ con div tại 100vh, sau đó nó sẽ chỉ lấp đầy 100% của chiều cao của khung nhìn, và không nhất thiết phụ huynh div.

Xem này jsfiddle:

output

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; 
}

Nguồn

2015-06-25 02:02:00

Rất tuyệt. Tôi đang sử dụng đơn vị vh –

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

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

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

Ví 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>

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>

Nguồn

2017-12-05 11:43:31 IanC

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

Trả lời

Các vấn đề liên quan