Корректная работа свойств vw и vh

#html #css

Не могу понять как работает свойство vw и vh.

На css-tricks пишет:


  1vw = 1% of viewport width; 
  1vh = 1% of viewport height


Но, например, у меня ширина окна 768рх, по этому когда я выставляю font-size: 100vw
по логике размер шрифта должен заполнить 768рх, или нет? А то у меня залезает значительно
дальше 768рх.

P.S. Уже не одну статью перечитал, и никак не могу понять как корректно вычислить
зависимость расширения экрана от значения vw/vh.

Пример в песочнице:
https://jsfiddle.net/obats/wf6vu3a8/
    

Ответы

Ответ 1

Вот тут хорошо написано по этому поводу: 


  Что такое «размер шрифта»? Это вовсе не
  «размер самой большой буквы в нём», как можно было бы подумать.
  
  Размер шрифта – это некоторая «условная единица», которая встроена в
  шрифт.
  
  Она обычно чуть больше, чем расстояние от верха самой большой буквы до
  низа самой маленькой. То есть, предполагается, что в эту высоту
  помещается любая буква или их сочетание. Но при этом «хвосты» букв,
  таких как р, g могут заходить за это значение, то есть вылезать снизу.
  Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.


Так что измерить размер шрифта с помощью каких-то стандартных формул не получится,
более того разные шрифты имеют разные размеры этих запасных отступов.

Сам обычно использую для шрифта метод подбора, он заключается в том, что в отладчике
подбирается подходящее значение в px соотносимое со значением в vh или в vw, а дальше
уже используется коэффициент. Например, если 14px = 2.8vh, то получается коэффициент
5, сл-но 20px/5 = 4vh.

UPD.

В роли отладчика для сравнения шрифтов выступает обычный браузерный отладчик, например,
в Chrome. Пишите в css так:

.class {
  font-size: 14px;
  font-size: 2.8vh;
}


А дальше уже играете с чекбоксами в отладчике включая/выключая нижнее значение и
подгоняя размер в vh, пока перестанете замечать разницу от включения/выключения.


Ответ 2

font-size: 100vw



А должно быть 100vh.

https://jsfiddle.net/wf6vu3a8/1/



html {
  background-color: #222;
  color: #FF4136;
}

h1 {
  font-size: 100vh;
  text-align: center;
  line-height: 1;
  padding: 0;
  margin: 0;
}
Questionable




Дальше - разница в line-height и margin у body вызывают скролл.


Ответ 3

1vh = 1% от высоты размеров окна. В вашем же примере попробуйте изменить высоту окна
с результатом.

UPD: Возможно проблема в самом jsfiddle. На http://codepen.io/Ostroffskiy/pen/ORVRKR
ваш код 

html {
  background-color: #222;
  color: #FF4136;
}

h1 {
  font-size: 100vw;
  text-align: center;
  line-height: 1;
  padding: 0;
  margin: 0;
}


прекрасно работает.