Але що робити, якщо контейнер не є вікном перегляду (тілом)?
Це запитання задається у коментарі Олексія під прийнятою відповіддю .
Цей факт не означає, що 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%ширину здійснюється @mediaабо через JavaScript, або в той же час, font-sizeпотрібно було б пристосувати або медіа-запит, або JavaScript, до нового обчислення 5vw * .25 = 1.25. Це дозволило б розмістити текст у такому ж розмірі, якби "ширина" оригінального 50%контейнера була зменшена вдвічі від розміру вікна перегляду, але тепер була зменшена через зміну власного відсоткового обчислення.
Змагання
При використанні calc()функції CSS3 буде важко динамічно регулюватись, оскільки ця функція наразі не працює для font-sizeцілей. Таким чином, ви не можете виконати чисте регулювання CSS 3, якщо ваша ширина змінюється calc(). Звичайно, незначне регулювання ширини поля може бути недостатньо для того, щоб гарантувати будь-які зміни font-size, тому це може не мати значення.
font-size: 100%;означає 100% розміру тексту, який би був текст (тобто той, який він успадковує від свого батьківського). За замовчуванням це 16 пікселів. Тож якщо ви використали 50%, це буде розмір шрифту: 8px