J'arrive un peu en retard ici, je n'obtiens pas beaucoup de mérite pour cela, je fais juste un mélange des réponses ci-dessous parce que j'ai été obligé de le faire pour un projet.
Donc pour répondre à la question: cette propriété CSS n'existe pas . Je ne sais pas pourquoi, mais je pense que c'est parce qu'ils ont peur d'une mauvaise utilisation de cette propriété, mais je ne trouve aucun cas d'utilisation où cela peut être un problème sérieux.
Quoi qu'il en soit, quelles sont les solutions?
Deux outils nous permettront de faire cela: les requêtes média et la propriété vw
1) Il existe une solution "folle" consistant à faire une requête média pour chaque étape que nous ançons dans notre css, en changeant la police d'un montant fixe à un autre montant fixe. Cela fonctionne, mais c'est très ennuyeux à faire et vous n'avez pas un aspect linéaire lisse.
2) Comme l'explique AlmostPitt, il existe une solution brillante pour les minima:
font-size: calc(7px + .5vw);
Le minimum ici serait de 7 pixels en plus de 0,5% de la largeur de la vue.
C'est déjà vraiment cool et fonctionne dans la plupart des cas . Il ne nécessite aucune requête multimédia, il vous suffit de passer du temps à trouver les bons paramètres.
Comme vous l'avez remarqué, il s'agit d'une fonction linéaire, les mathématiques de base vous apprennent que deux points vous trouvent déjà les paramètres. Ensuite, fixez simplement la taille de police en px que vous voulez pour les très grands écrans et pour la version mobile, puis calculez si vous voulez faire une méthode scientifique. Bien pensé, ce n'est absolument pas nécessaire et vous pouvez simplement y aller en essayant.
3) Supposons que vous ayez un client très ennuyeux (comme moi) qui veut absolument qu'un titre soit une ligne et pas plus. Si vous avez utilisé la solution AlmostPitt, alors vous avez des problèmes car votre police continuera de grandir et si vous avez un conteneur de largeur fixe (comme le bootstrap s'arrêtant à 1140px ou quelque chose dans de grandes fenêtres). Ici, je vous suggère d'utiliser également une requête média. En fait, vous pouvez simplement trouver la quantité maximale de taille px que vous pouvez gérer dans votre conteneur avant que l'aspect ne devienne indésirable (pxMax). Ce sera votre maximum. Ensuite, il vous suffit de trouver la largeur d'écran exacte que vous devez arrêter (wMax). (Je vous laisse inverser une fonction linéaire par vous-même).
Après ça, fais juste
@media (min-width: [wMax]px) {
h2{
font-size: [pxMax]px;
}
}
Ensuite, il est parfaitement linéaire et la taille de votre police cesse de croître! Notez que vous n'avez pas besoin de mettre votre propriété css précédente (calc ...) dans une requête multimédia sous wMax car la requête multimédia est considérée comme plus importante et elle écrasera la propriété précédente.
Je ne pense pas qu'il soit utile de créer un extrait de code pour cela, car vous auriez du mal à le faire sur tout l'écran et ce n'est pas sorcier après tout.
J'espère que cela pourrait aider les autres, et n'oubliez pas de remercier AlmostPitt pour sa solution.