Mas e se o contêiner não for a viewport (corpo)?
Esta pergunta é feita em um comentário por Alex sob a resposta aceita .
Esse fato não significa vwque não possa ser utilizado, até certo ponto, no tamanho desse contêiner. Agora, para ver qualquer variação, é preciso supor que o contêiner seja de alguma forma flexível em tamanho. Seja por porcentagem direta widthou por 100% menos margens. O ponto se torna "discutível" se o contêiner estiver sempre definido como, digamos, 200pxlargo - então apenas defina um font-sizeque funcione para essa largura.
Exemplo 1
Com um contêiner de largura flexível, no entanto, deve-se perceber que, de alguma forma, o contêiner ainda está sendo dimensionado para fora da viewport . Como tal, é uma questão de ajustar uma vwconfiguração com base nessa diferença percentual de tamanho na janela de visualização, o que significa levar em consideração o tamanho dos wrappers pai. Veja este exemplo :
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;
}
Supondo que aqui divé filho do body, é 50%dessa 100%largura, que é o tamanho da janela de visualização neste caso básico. Basicamente, você deseja definir um vwque ficará bem para você. Como você pode ver no meu comentário no conteúdo CSS acima, você pode "pensar" matematicamente com relação ao tamanho total da janela de exibição, mas não precisa fazer isso. O texto vai "flexionar" com o contêiner porque ele está flexionando com o redimensionamento da viewport. UPDATE: veja um exemplo de dois contêineres de tamanhos diferentes .
Exemplo 2
Você pode ajudar a garantir o dimensionamento da viewport forçando o cálculo com base nisso. Considere este exemplo :
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;
}
O dimensionamento ainda é baseado na janela de exibição, mas é essencialmente configurado com base no próprio tamanho do contêiner.
O tamanho do contêiner deve mudar dinamicamente ...
Se o dimensionamento do elemento do contêiner acabasse alterando dinamicamente sua relação percentual, seja por @mediapontos de interrupção ou por JavaScript, qualquer que fosse o "destino" base, seria necessário recalcular para manter o mesmo "relacionamento" para o tamanho do texto.
Veja o exemplo 1 acima. Se a largura divfoi alterada 25%por um @mediaou outro JavaScript, ao mesmo tempo, font-sizeseria necessário ajustar a consulta de mídia ou o JavaScript para o novo cálculo de 5vw * .25 = 1.25. Isso colocaria o tamanho do texto no mesmo tamanho que teria sido se a "largura" do 50%contêiner original tivesse sido reduzida pela metade do tamanho da janela de exibição, mas agora foi reduzida devido a uma alteração no seu próprio cálculo de porcentagem.
Um desafio
Com a calc()função CSS3 em uso, seria difícil ajustar dinamicamente, pois essa função não funciona para font-sizepropósitos no momento. Portanto, você não poderá fazer um ajuste puro do CSS 3 se a largura estiver mudando calc(). Obviamente, um pequeno ajuste de largura das margens pode não ser suficiente para justificar qualquer alteração font-size, por isso pode não ser importante.
font-size: 100%;significa 100% do tamanho do texto (isto é, o que ele herda de seu pai). Por padrão, isso é 16px. Portanto, se você usasse 50%, seria o tamanho da fonte: 8px