Mais que faire si le conteneur n'est pas la fenêtre (corps)?
Cette question est posée dans un commentaire d'Alex sous la réponse acceptée .
Ce fait ne signifie pas qu'il ne vwpeut pas être utilisé dans une certaine mesure pour dimensionner ce conteneur. Maintenant, pour voir toute variation, il faut supposer que le conteneur est en quelque sorte de taille flexible. Que ce soit par un pourcentage direct widthou en étant 100% moins les marges. Le point devient "théorique" si le conteneur est toujours défini sur, disons, 200pxlarge - alors définissez simplement un font-sizequi fonctionne pour cette largeur.
Exemple 1
Avec un conteneur à largeur flexible, cependant, il faut comprendre que d'une certaine manière, le conteneur est toujours dimensionné hors de la fenêtre . En tant que tel, il s'agit d'ajuster un vwparamètre basé sur cette différence de taille en pourcentage à la fenêtre, ce qui signifie prendre en compte le dimensionnement des wrappers parents. Prenez cet exemple :
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;
}
En supposant qu'ici divest un enfant de body, il est 50%de cette 100%largeur, qui est la taille de la fenêtre d'affichage dans ce cas de base. Fondamentalement, vous voulez définir un vwqui va bien vous paraître. Comme vous pouvez le voir dans mon commentaire dans le contenu CSS ci-dessus, vous pouvez "réfléchir" mathématiquement à la taille complète de la fenêtre d'affichage, mais vous n'avez pas besoin de le faire. Le texte va "fléchir" avec le conteneur car le conteneur fléchit avec le redimensionnement de la fenêtre. MISE À JOUR: voici un exemple de deux conteneurs de tailles différentes .
Exemple 2
Vous pouvez aider à garantir le dimensionnement de la fenêtre en forçant le calcul en fonction de cela. Considérez cet exemple :
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;
}
Le dimensionnement est toujours basé sur la fenêtre, mais est essentiellement configuré en fonction de la taille du conteneur lui-même.
La taille du conteneur doit-elle changer dynamiquement ...
Si le dimensionnement de l'élément conteneur finissait par changer dynamiquement sa relation en pourcentage via des @mediapoints d'arrêt ou via JavaScript, alors quelle que soit la "cible" de base, il faudrait recalculer pour conserver la même "relation" pour le dimensionnement du texte.
Prenons l'exemple n ° 1 ci-dessus. Si le a divété changé en 25%largeur par @mediaou par JavaScript, alors en même temps, le font-sizedevrait ajuster dans la requête multimédia ou par JavaScript au nouveau calcul de 5vw * .25 = 1.25. Cela donnerait à la taille du texte la même taille qu'elle aurait été si la "largeur" du 50%conteneur d' origine avait été réduite de moitié par rapport au dimensionnement de la fenêtre d'affichage, mais a maintenant été réduite en raison d'une modification de son propre calcul de pourcentage.
Un défi
Avec la calc()fonction CSS3 utilisée, il deviendrait difficile de s'ajuster dynamiquement, car cette fonction ne fonctionne pas pour le font-sizemoment. Vous ne pouvez donc pas effectuer un ajustement CSS 3 pur si votre largeur change calc(). Bien sûr, un ajustement mineur de la largeur pour les marges peut ne pas être suffisant pour justifier un changement font-size, il peut donc ne pas avoir d'importance.
font-size: 100%;signifie 100% de la taille du texte (c'est-à-dire celui dont il hérite de son parent). Par défaut, c'est 16 pixels. Donc, si vous avez utilisé 50%, ce serait la taille de police: 8px