Но что, если контейнер не является окном просмотра (телом)?
Этот вопрос задается в комментарии Алекса под принятым ответом .
Этот факт не означает, что не vwможет быть использован в некоторой степени для размера этого контейнера. Теперь, чтобы увидеть какие-либо изменения, нужно предположить, что контейнер каким-то образом является гибким по размеру. Будь то прямой процент widthили 100% минус поля. Дело становится «спорными» , если контейнер всегда устанавливается, скажем, в 200pxширину - тогда просто установить , font-sizeчто работает для этой ширины.
Пример 1
Однако с контейнером с гибкой шириной необходимо понимать, что каким-то образом размер контейнера все еще находится вне области просмотра . Таким образом, речь идет о настройке vwпараметра на основе этой разницы в процентах по размеру для окна просмотра, что означает учет размеров родительских оболочек. Возьмите этот пример :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
Предполагая, что здесь divявляется потомком body, он имеет 50%ту 100%ширину, которая является размером области просмотра в этом базовом случае. По сути, вы хотите установить, vwчто будет выглядеть хорошо для вас. Как вы можете видеть из моего комментария в приведенном выше контенте CSS, вы можете «обдумать» это математически относительно полного размера области просмотра, но вам не нужно этого делать. Текст будет «сгибаться» с контейнером, потому что контейнер сгибается с изменением размера области просмотра. ОБНОВЛЕНИЕ: вот пример двух разных размеров контейнеров .
Пример 2
Вы можете помочь в определении размера области просмотра, форсируя вычисления, основанные на этом. Рассмотрим этот пример :
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
Размер по-прежнему зависит от области просмотра, но по сути настраивается исходя из самого размера контейнера.
Должен ли размер контейнера динамически меняться ...
Если размер элемента контейнера заканчивался динамическим изменением его процентного отношения либо через @mediaточки останова, либо через JavaScript, то какой бы ни была базовая «цель», потребовался бы пересчет, чтобы сохранить те же «отношения» для определения размера текста.
Возьмите пример № 1 выше. Если бы он divбыл переключен на 25%ширину либо с помощью @mediaJavaScript, либо в то же самое время, font-sizeто необходимо было бы настроить либо в медиа-запросе, либо с помощью JavaScript новый расчет 5vw * .25 = 1.25. При этом размер текста будет таким же, как если бы «ширина» исходного 50%контейнера была уменьшена вдвое от размера окна просмотра, но теперь была уменьшена из-за изменения его собственного процентного расчета.
Вызов
При использовании calc()функции CSS3 стало бы трудно настраивать динамически, поскольку эта функция font-sizeв настоящее время не работает для целей. Таким образом, вы не можете выполнить чистую настройку CSS 3, если ваша ширина меняется calc(). Конечно, небольшая корректировка ширины полей может быть недостаточной, чтобы оправдать любые изменения font-size, поэтому это может не иметь значения.
font-size: 100%;означает 100% размера текста (т.е. тот, который он наследует от своего родителя). По умолчанию это 16px. Так что, если бы вы использовали 50%, это был бы размер шрифта: 8px