Ma cosa succede se il contenitore non è il viewport (corpo)?
Questa domanda viene posta in un commento da Alex sotto la risposta accettata .
Questo fatto non significa che non vwpossa essere utilizzato in una certa misura per le dimensioni di quel contenitore. Ora per vedere qualsiasi variazione bisogna supporre che il contenitore sia in qualche modo flessibile nelle dimensioni. Sia attraverso una percentuale diretta widthsia attraverso il 100% meno i margini. Il punto diventa "controverso" se il contenitore è sempre impostato su, diciamo, 200pxlargo - quindi basta impostare un font-sizeche funziona per quella larghezza.
Esempio 1
Con un contenitore a larghezza flessibile, tuttavia, è necessario rendersi conto che in qualche modo il contenitore viene ancora ridimensionato dalla finestra . In quanto tale, si tratta di regolare vwun'impostazione basata sulla differenza di dimensione percentuale rispetto al viewport, il che significa tenere conto del dimensionamento dei wrapper principali. Prendi questo esempio :
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;
}
Supponendo qui che divsia un figlio di body, è 50%di quella 100%larghezza, che è la dimensione del viewport in questo caso di base. Fondamentalmente, vuoi impostare un vwaspetto che ti stia bene. Come puoi vedere nel mio commento nel contenuto CSS sopra, puoi "pensarci" matematicamente rispetto alla dimensione completa della finestra, ma non è necessario farlo. Il testo "fletterà" con il contenitore perché il contenitore si flette con il ridimensionamento della finestra. AGGIORNAMENTO: ecco un esempio di due contenitori di dimensioni diverse .
Esempio 2
È possibile contribuire a garantire il dimensionamento delle finestre forzando il calcolo basato su quello. Considera questo esempio :
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;
}
Il dimensionamento è ancora basato su viewport, ma è essenzialmente impostato in base alle dimensioni del contenitore stesso.
La dimensione del contenitore deve cambiare in modo dinamico ...
Se il dimensionamento dell'elemento contenitore finiva per cambiare dinamicamente la sua relazione percentuale tramite @mediapunti di interruzione o JavaScript, qualunque fosse la "destinazione" di base avrebbe bisogno di essere ricalcolata per mantenere la stessa "relazione" per il dimensionamento del testo.
Prendi l'esempio n. 1 sopra. Se il divparametro fosse impostato su 25%larghezza da uno @mediao da JavaScript, allo stesso tempo, font-sizesarebbe necessario adattarlo nella query media o da JavaScript al nuovo calcolo di 5vw * .25 = 1.25. Ciò porterebbe la dimensione del testo alla stessa dimensione che sarebbe stata se la "larghezza" del 50%contenitore originale fosse stata ridotta della metà dal dimensionamento della finestra, ma ora è stata ridotta a causa di una modifica del proprio calcolo percentuale.
Una sfida
Con la calc()funzione CSS3 in uso, sarebbe difficile adattarsi dinamicamente, poiché quella funzione non funziona allo font-sizescopo in questo momento. Quindi non potresti fare una pura regolazione CSS 3 se la tua larghezza sta cambiando calc(). Naturalmente, un piccolo aggiustamento della larghezza per i margini potrebbe non essere sufficiente per giustificare qualsiasi cambiamento font-size, quindi potrebbe non avere importanza.
font-size: 100%;significa il 100% della dimensione che il testo sarebbe stato (cioè quello che eredita dal suo genitore). Di default è 16px. Quindi, se utilizzassi il 50%, sarebbe la dimensione del carattere: 8px