Comment puis-je redimensionner la taille de la police proportionnellement à la taille de son conteneur en CSS ?

Mise à l'échelle de la taille de la police avec la taille du conteneur en CSS

CSS propose une méthode pour ajuster proportionnellement la taille de la police en fonction de la taille de son conteneur, malgré les limites de la mise à l'échelle des polices à l'aide pourcentages.

Pour y parvenir, utilisez l'unité de largeur de la fenêtre d'affichage (vw) :

#mydiv { font-size: 5vw; }

Avec cette configuration, la police dans le conteneur, désignée par #mydiv, sera constamment mise à l'échelle en pourcentage de la largeur de la fenêtre.

Vous pouvez également utiliser le SVG intégré dans le HTML fournit une autre solution. Dans cette approche, l'attribut font-size de l'élément texte est interprété comme des « unités utilisateur » par rapport aux dimensions de la fenêtre. Par exemple, une taille de police de 1 dans une fenêtre définie comme 0 0 100 100 représente un centième de la taille de l'élément SVG.

Il est important de noter que les calculs dans les pourcentages CSS sont toujours relatifs à la police héritée. taille, pas la taille du conteneur. Par conséquent, CSS ne dispose pas d'une unité désignée pour mettre à l'échelle la taille de la police en fonction de la largeur du conteneur, comme "bw" (box-width).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!