Calculateur CSS clamp()
Fixez une taille pour les petits écrans et une pour les grands. Le clamp() entre les deux s’écrit pour vous, et se voit à chaque largeur.
- CSS clamp()
- Aperçu en direct
- rem ou px
Votre clamp()
clamp(2rem, 1.413rem + 2.6087vw, 3.5rem)
Fluide, du téléphone au bureau
Fonctionne entièrement dans votre navigateur. Rien de ce que vous entrez n’est envoyé ni conservé.
Comment clamp() rend une taille fluide
clamp(min, préférée, max) retient la valeur préférée tant qu’elle reste entre les deux bornes. Avec une valeur préférée qui grandit avec la largeur de l’écran, en vw, une taille grandit en ligne droite de son minimum sur les petits écrans à son maximum sur les grands, et s’arrête au-delà. Aucune requête média n’est nécessaire.
Pourquoi des rem, et pas seulement des vw
Une taille de police en vw seule ignore les réglages de police du lecteur et ne grandit pas quand on zoome la page, ce qui enfreint la règle d’accessibilité voulant qu’un texte puisse s’agrandir à 200 % (WCAG 1.4.4). Le terme du milieu mêle ici des rem aux vw : le zoom agrandit toujours le texte. La sortie en px sert aux espacements, où le zoom compte moins.
Choisir les deux extrémités
Partez du plus petit écran pour lequel vous concevez, en général 320 ou 360 pixels, et de la largeur où votre mise en page cesse de grandir, souvent entre 1200 et 1440. Un titre peut passer de 32 à 56 pixels entre les deux ; le texte courant change bien moins, de 16 à 18 peut-être. Une règle répandue garde la plus grande taille sous deux fois et demie la plus petite, pour que le zoom puisse encore doubler le texte.
Vous dimensionnez des images plutôt que du texte ? Le calculateur de rapport d’aspect garde leur forme.
D’autres outils
Tous les outilsFait par Mystya.
Nous sommes un studio web du Québec. Ces outils sont gratuits et le resteront : c’est notre façon de montrer ce à quoi nous tenons, dans quelque chose qui sert. Si vous voulez un site construit avec la même attention, parlons-en.