Блог

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

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

#html #css #angular

#HTML #css #angular

Вопрос:

Я попытался установить размер шрифта с помощью width of viewport и хочу установить размер в 20% от размера видовых экранов, используя 

 h4{
  font-size: 20vw;
}

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

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

Комментарии:

1. vn не является единицей — Либо vh , либо vw … Я предполагаю, что вы имели в виду vw .

2. вы имели в виду em вместо vn ?

3. Предполагая, что vn — это опечатка, 1vw составляет 1 процент от ширины окна просмотра, поэтому, если окно просмотра имеет ширину 1229 пикселей, 20vw будет иметь размер шрифта 246 пикселей. Но почему вы пишете 20vw, если хотите 13vw?

4. Извините. Ошибка в написании. Я использовал vw в своем коде.

5. В примере показано, как я вычислял, а не сам код.

Ответ №1:

Используйте vw вместо этого, это означает (‘ширина окна просмотра’). Кроме того, vw это довольно большое число, определите шрифт как что-то вроде: 

 h4 {
  font-size: 1vw;
}

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

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

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

Комментарии:

1. Я имел в виду именно vw. Но я думаю, что неправильно использовал vw. Я думаю, что эти 20vw означают, что, например, textmessage будет настроен на заполнение 20 процентов области просмотра

2. Ах, нет, размер шрифта не совпадает с шириной любого заданного текста. Если бы это было так, все строки в любом блоке текста были бы разного размера.

3. @Mikael тогда вы можете установить коинтейнер на 20% ширины vw и подогнать под него шрифт. Используйте это для справки: css-tricks.com/fitting-text-to-a-container

4. Спасибо за совет. Я думаю, что это лучшее решение для меня