Comment redimensionner dynamiquement la taille de la police en fonction de la taille Div ?

Redimensionner la taille de la police en fonction de la taille du div

Dans un scénario où un div est composé de neuf cases avec du texte contenu dans la case du milieu , il est souhaitable d'ajuster la taille de la police de manière dynamique pour maintenir un rapport cohérent avec les dimensions globales de la page.

Redimensionner le texte dans la division

Pour y parvenir, incorporez le propriétés CSS3 suivantes dans le tag :

body {
  font-size: calc(1.25vmin + 1.25vmax);
}

Compatibilité entre résolutions

Au lieu d'utiliser plusieurs requêtes multimédia CSS pour s'adapter à différentes résolutions, envisagez d'utiliser les styles CSS3 suivants, qui ajustent automatiquement la police taille en fonction de la largeur de l'écran :

@media (min-width: 50px) { body { font-size: 0.1em; } }
@media (min-width: 100px) { body { font-size: 0.2em; } }
// ...and so on, with incrementing width thresholds...
@media (min-width: 1700px) { body { font-size: 3.6em; } }

Explication

• L'unité vmin représente le pourcentage minimum de la hauteur ou de la largeur de la fenêtre d'affichage.
• L'unité vmax représente le pourcentage maximum de la hauteur ou de la largeur de la fenêtre.
• En utilisant cette formule, la taille de la police sera proportionnelle à la plus petite de la hauteur et de la largeur de la fenêtre, garantissant ainsi des proportions de texte cohérentes. différentes tailles d'écran.

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!