Удалить родительский элемент в ассоциативном массиве

Но что, если контейнер не является окном просмотра (body)?

Этот вопрос задается в комментарии Alex по принятому ответу.

Этот факт не означает, что vw не может использоваться в некоторой степени для размера для этого контейнера. Теперь, чтобы увидеть какие-либо вариации, нужно учитывать, что контейнер каким-то образом является гибким по размеру. Через прямой процент width или через 100% минус маржи. Дело становится «спорным», если контейнер всегда устанавливается, скажем, 200px широко - то просто установить font-size, который работает для этой ширины

Пример 1

[. g11] Однако при использовании контейнера с гибкой шириной необходимо убедиться, что в какой-то мере контейнер все еще имеет размер в окне просмотра . Таким образом, это вопрос настройки параметра 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, вы можете «мыслить» математически по отношению к полному размеру видового экрана, но вам не нужно делать это. Текст будет «гибким» с контейнером, потому что контейнер сгибается с изменением размера видового экрана. UPDATE: вот пример двух контейнеров различного размера .

Пример 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 200% 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% либо на @media, либо на javascript, то в то же время font-size нужно будет отрегулировать либо запрос на медиа, либо javascript для нового вычисления 5vw * .25 = 1.25 , Это поместило бы размер текста в том же размере, что и ширина «оригинала» 50% была бы уменьшена наполовину от размера видового экрана, но теперь была уменьшена из-за изменения собственного процентного расчета.

Задача

С помощью используемой функции CSS3 calc() было бы сложно настроить динамически, поскольку эта функция не работает для font-size в настоящее время. Таким образом, вы не сможете выполнить чистую настройку CSS3, если ваша ширина меняется на calc(). Конечно, незначительная корректировка ширины для полей может быть недостаточной, чтобы гарантировать любое изменение в font-size, поэтому это может не иметь значения.