Единицы CSS. В чем разница между vh/vw и%?

Я только что узнал о новом и необычном блоке CSS. vh и vw измерьте процент высоты и ширины окна просмотра соответственно.

Я посмотрел на этот вопрос из Stack Overflow, но он сделал элементы более похожими.

Как работает vw и vh

В ответ говорится:

vw и vh - процент от ширины и высоты окна, соответственно: 100vw - 100% от ширины, 80vw - 80% и т.д.

Это похоже на то же самое, что и единица %, которая является более распространенной.

В Инструментах разработчика я попытался изменить значения из vw/vh на% и наоборот и получил тот же результат.

Есть ли разница между этими двумя? Если нет, то почему эти новые единицы были введены в CSS3?

Ответы

Ответ 1

100% может быть 100% высоты всего. Например, если у меня есть родительский div высотой 1000px и дочерний div с высотой 100%, то этот дочерний div теоретически может быть намного выше, чем высота области просмотра, или намного меньше, чем высота области просмотра, хотя этот div установлен на 100% высоты.

Если я вместо этого установлю для этого дочернего 100vh div 100vh, то он будет заполнять только 100% высоты области просмотра, а не обязательно родительский 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>

Ответ 2

Я знаю, что вопрос очень старый, и @Josh Beam решил самую большую разницу, но есть еще одна:

Предположим, у вас есть <div>, прямой дочерний элемент <div> <body> который вы хотите заполнить весь видовой width: 100vw; height: 100vh;, поэтому вы используете width: 100vw; height: 100vh; width: 100vw; height: 100vh; , Все работает так же, как width: 100%; height: 100vh; width: 100%; height: 100vh; пока вы не добавите больше контента и не появится вертикальная полоса прокрутки. Поскольку vw учитывает полосу прокрутки как часть области просмотра, width: 100vw; будет немного больше width: 100%; , Эта небольшая разница в итоге добавляет горизонтальную полосу прокрутки (требуется, чтобы пользователь видел эту небольшую дополнительную ширину), и, как следствие, высота также будет немного отличаться в обоих случаях.

Это необходимо учитывать при принятии решения о том, какой из них использовать, даже если размер родительского элемента совпадает с размером области просмотра документа.

Пример:

Используя 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>

Ответ 3

единицы vw (view-width) и vh (view-height) относятся к размеру порта просмотра, где 100vw или vh - это 100% ширины/высоты порта просмотра.

Например, если порт представления имеет ширину 1600px, и вы указываете что-то как 2vw, это будет эквивалентно 2% ширины порта просмотра, или 32px.

% unit всегда основан на ширине родительского элемента текущего элемента

Ответ 4

Спасибо за ваш ответ и пример кода, @IanC. Это мне очень помогло. Уточнение: я полагаю, что вы имели в виду "полосу прокрутки", когда писали "боковую панель".

Вот некоторые связанные обсуждения о единицах просмотра окна подсчета полосы прокрутки, которые я также нашел полезными:

В спецификации W3C для единиц vw, vh, vmin, vmax ("длины в процентах области просмотра") говорится, что "предполагается, что любые полосы прокрутки не существуют".

По-видимому, Firefox вычитает ширину полосы прокрутки из 100vw, как @Nolonar комментирует в Разница между шириной: 100% и шириной: 100vw? отмечает, ссылаясь на "Могу ли я использовать".

Могу ли я использовать, возможно, в связи со спецификацией (?), Говорит, что все браузеры, кроме Firefox, в настоящее время "неправильно" считают 100vw всей шириной страницы, включая вертикальную полосу прокрутки.

Ответ 5

Зачем использовать VW над%, конечно, это одно и то же, или я что-то упустил?

Ответ 6

Есть разница, которая не обязательно была поднята. 100vw включает в себя ширину полосы прокрутки, в то время как 100% не включает ее. Это небольшая разница, но важная при выполнении дизайна.