Pure CSS pour rendre la taille de la police réactive en fonction de la quantité dynamique de caractères.

Question

Je sais que ce problème pourrait être résolu assez facilement avec Javascript, mais je ne suis intéressé que par une solution purement CSS.

Je veux un moyen de redimensionner dynamiquement le texte pour qu'il tienne toujours dans un div fixe. Voici l'exemple de balisage :

<div style="width: 200px; height: 1em; overflow: hidden;">
    <p>Some sample dynamic amount of text here</p>
</div>

Je pensais que cela pourrait être possible en spécifiant la largeur du conteneur en ems, et en faisant en sorte que la taille de la police hérite de cette valeur ?

Answer 1

Je viens de découvrir que c'est possible en utilisant des unités VW. Il s'agit des unités associées au réglage de la largeur de la fenêtre d'affichage. Il y a quelques inconvénients, comme l'absence de prise en charge des anciens navigateurs, mais c'est vraiment quelque chose à envisager sérieusement. De plus, vous pouvez toujours fournir des solutions de repli pour les anciens navigateurs :

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ y https://medium.com/design-ux/66bddb327bb1

Answer 2

Il existe plusieurs façons d'y parvenir

Utilisez requête média Le moyen le plus simple est d'utiliser les dimensions en % ou en em. Il suffit de modifier la taille de la police de base pour que tout change.

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}

h5{
    font-size: 1.4em;
}

Utilisez les dimensions en % ou em . Il suffit de modifier la taille de la police de base pour que tout change. Dans la version précédente, vous pouviez juste changer la police du corps et non celle de h1 à chaque fois, ou laisser la taille de la police de base à la valeur par défaut de l'appareil et tout le reste en em.

voir kyleschaeffer.com/.... Pour plus d'informations sur em, px et %.

OU

CSS3 prend en charge de nouvelles dimensions qui sont relatives au port d'affichage. Mais cela ne fonctionne pas dans Android < 4.4

1. 3.2vw = 3,2% de la largeur de la fenêtre d'affichage
2. 3.2vh = 3,2% de la hauteur de la fenêtre d'affichage
3. 3.2vmin = Le plus petit de 3.2vw ou 3.2vh

4. 3.2vmax = Le plus grand de 3.2vw ou 3.2vh

   body
   {
       font-size: 3.2vw;
   }

voir css-tricks.com/.... et regardez aussi caniuse.com/....

Answer 3

La seule solution serait probablement de définir des largeurs différentes pour les différentes tailles d'écran, mais cette approche est assez imprécise et vous devriez utiliser une solution js.

h1 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 12px;
    }
}