CSS Units-в чем разница между vh/vw и %?

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



Я посмотрел на этот вопрос из переполнения стека, но это сделало блоки еще более похожими.



как работает vw и VH unit



ответ, в частности, говорится:




vw и vh-это процент от ширины и высоты окна,
соответственно: 100vw-100% за ширина, 80вв 80%, ЕТК.




это похоже на то же самое, что и % блок, который более общий.



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



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

562   4  

4 ответов:

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

если я вместо этого сделаю этого ребенка div установлена в размере 100vh, потом только заполнить 100% высоты окна просмотра, и не обязательно родитель div.

посмотреть этот 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;
}
82  
2015-06-25 05:07:42

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

Предположим, у вас есть <div>, прямым потомком <body> что вы хотите заполнить весь видовой экран, так что вы используете width: 100vw; 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>

используя 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>
6  
2017-12-05 13:43:31

Фольксваген (вид-ширина) и VH (вид высоты) единицы реляционной вид-размер порта, где 100vw или VH составляет 100% от просмотра-порт ширину/высоту.

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

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

0  
2018-04-26 12:57:25

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

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

The W3C spec для VW, vh, vmin, vmax единиц ("видовой экран процент длины") говорит "любые полосы прокрутки, как предполагается, не существует".

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

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

0  
2018-05-19 03:18:30

Comments

    Ничего не найдено.
Click here to cancel reply.