Comment puis-je rendre mon texte d'en-tête réactif à l'aide de CSS ?

Taille de police réactive en CSS

La taille de police réactive garantit que le texte s'adapte parfaitement aux différentes tailles d'écran, empêchant ainsi le défilement horizontal sur les appareils dotés d'écrans étroits . Dans ces questions-réponses, nous abordons une question concernant la réactivité de la taille de police dans Zurb Foundation 3 et proposons une solution utilisant les unités de fenêtre.

Q : Pourquoi mon grand texte d'en-tête ne s'ajuste-t-il pas lorsque je redimensionne le navigateur à la taille mobile ?

R : Par défaut, les unités CSS telles que les ems, les pixels et les points sont statiques et ne répondent pas aux modifications dans la fenêtre d'affichage. size.

Q : Comment puis-je obtenir des en-têtes réactifs comme ceux de la page d'exemple de typographie de Zurb Foundation 3 ?

R : Vous pouvez utiliser des unités de fenêtre, qui définissent la police. tailles par rapport aux dimensions de la fenêtre. Cela permet à la taille de la police d'évoluer dynamiquement avec la fenêtre d'affichage.

Solution :

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Dans ces exemples :

• vw - 1 % de la fenêtre d'affichage width
• vh - 1% de la hauteur de la fenêtre
• vmin - Le plus petit de vw ou vh
• vmax - Le plus grand de vw ou vh

En utilisant unités de fenêtre, vous pouvez créer des tailles de police réactives qui s'adaptent aux différentes dimensions de la fenêtre d'affichage, garantissant une lisibilité optimale sur tous les appareils.

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!