Попытка установить ширину div, используя ширину области просмотра, не работает

Question

Я попытался установить размер шрифта с помощью ширины области просмотра и хочу установить размер 20% от размера области просмотра с помощью

h4{
  font-size: 20vw;
}

Но размер шрифта, который он устанавливает, огромен. Может быть, в 30 раз больше, чем предполагалось. Я что-то пропустил? Когда я тестировал учебник Tryit Editor v3.6 , он работал как положено, поэтому я понятия не имею, что может пойти не так.

Пример: используя window.innerWidth, я получил размер области просмотра 1229px, и 13vn этого должны сделать текст вписывающимся в текстовое поле размером 160px, насколько я понимаю.

Answer 1

Вместо этого используйте vw, оно означает («ширина области просмотра»).Кроме того, vw - довольно большое число, определите шрифт следующим образом:

h4 {
  font-size: 1vw;
}

Если шрифт все еще слишком большой, используйте значения «0.x».И если в какой-то момент шрифт становится слишком маленьким, используйте CSS @media для определения минимального размера, например:

@media all and (max-width: 800px) { h4 { font-size: 12px; }

Это будетзаставьте страницу следовать этой команде, только если экран достаточно мал.