28172 sujets

CSS et mise en forme, CSS3

[Résolu] Valeur de "font-size" proportionnelle à la largeur d'écran

Bonjour,

Est-il possible de faire varier la valeur de la propriété font-size proportionnellement à la largeur d'écran sans passer de multiples requêtes de type @media ?
Le but étant d'alléger le feuille de style en évitant de créer des requêtes par paliers de tailles d'écrans et pouvoir ainsi s'adapter à toute taille d'écran, si possible, en une seule "règle".

Bien à vous,
Il aura fallu que je poste ce billet pour trouver la solution de moi-même alors que je tournais en rond depuis plusieurs jours Smiley confused ...

Il suffit d'utiliser les unités de mesure suivantes :
vh
vw
vm
Modifié par Foxy (10 Jul 2020 - 17:14)
Ce n'est pas aussi simple car ces valeurs peuvent donner des résultats disproportionnés. Il y a tout un tas de technique pour encadrer ces valeurs par un maximum et minimum, l'une des plus récente est celle-ci :
h1 {
  font-size: clamp(2rem, 3vw, 3rem);
}

Modifié par Olivier C (10 Jul 2020 - 20:21)
Olivier C a écrit :
Ce n'est pas aussi simple car ces valeurs peuvent donner des résultats disproportionnés. Il y a tout un tas de technique pour encadrer des valeurs maximum et minimum, l'une des plus récente est celle-ci :
h1 {
  font-size: clamp(2rem, 3vw, 3rem);
}


Bonjour Olivier,

Je ne comprends pas ce code ; pourrais-tu décrire son fonctionnement ?
Modifié par Foxy (10 Jul 2020 - 18:35)
Administrateur
Hello,

La valeur-fonction clamp() est vraiment extra
Attention, elle n'est actuellement pas compatible sur certains mobiles (Firefox mobile et Samsung Internet -> le 3e navigateur mobile en France par exemple), il faut donc envisager des alternatives pour ces navigateurs.

Par exemple :

h1 {
  font-size: calc(2rem + 2vw); /* min font size for mobile and old browsers */
  font-size: clamp(2rem, 3vw, 3rem);
}


Ou plus simplement :

h1 {
  font-size: 2rem; /* static font size for mobile and old browsers */
  font-size: clamp(2rem, 3vw, 3rem);
}
Meilleure solution
Merci Olivier, Jean-Pierre et Raphaël pour vos conseils. Ça m'a été très utile.

Bonne soirée !
Administrateur
Foxy a écrit :
(...)
Il suffit d'utiliser les unités de mesure suivantes :
vh
vw
vm

Attention typo je suppose : il existe vmin et vmax mais pas vm Smiley cligne
Felipe a écrit :

Attention typo je suppose : il existe vmin et vmax mais pas vm Smiley cligne


Bonne remarque Felipe, je le tiens d'un memento CSS qui est peut être un peu désuet. En effet "vm" ne fonctionne pas. Merci pour cette précision.
Sujet clos
Aller à