Convertisseur d'Unités CSS

Pour convertir des pixels en rem, divisez la valeur en pixels par la taille de police racine, que les navigateurs fixent à 16px par défaut. Ainsi, 24px donne 24 / 16 = 1,5rem, 12px donne 0,75rem, et 32px donne 2rem. Si les développeurs passent de px à rem, c'est pour l'accessibilité : le rem s'adapte à la taille de police choisie par le visiteur dans son navigateur, alors que les pixels codés en dur l'ignorent, ce qui garde le texte lisible pour les personnes qui zooment ou agrandissent la police. Si votre projet utilise une taille racine différente, le calcul change, le diviseur devant correspondre à la taille de police réelle de votre balise html. Ce convertisseur le fait instantanément dans toutes les unités à la fois, vous permet de définir une taille de police racine personnalisée plutôt que de supposer 16px, et signale la classe Tailwind correspondante (par exemple 16px correspond à text-base) pour que vous puissiez l'intégrer directement dans une base de code en classes utilitaires.

Ce sont toutes deux des unités de taille de police relatives, mais elles se mesurent par rapport à des références différentes. Un rem est toujours relatif à la taille de police de l'élément racine, donc 1rem correspond à la même valeur en pixels partout sur la page, quelle que soit l'imbrication. Un em est relatif à la taille de police de l'élément courant, ce qui signifie qu'il se compose : si un parent fait 1,2em et qu'un enfant à l'intérieur fait aussi 1,2em, l'enfant s'affiche à environ 1,44 fois la base, et une imbrication plus profonde multiplie encore ce résultat. Cette composition rend l'em utile pour un dimensionnement local au composant, comme un padding qui suit son propre texte, mais elle peut créer des surprises dans des arborescences profondes, là où le rem reste prévisible. Cet outil vous permet de définir séparément la taille de police racine et la taille de police du parent, afin de voir exactement comment une valeur en em se résout dans votre contexte d'imbrication spécifique par rapport à un rem.

Le CSS utilise une norme de référence fixe plutôt que la taille physique réelle de votre écran, si bien que les unités absolues sont définies les unes par rapport aux autres. Selon cette norme, 1 pouce équivaut à 96px et à 72pt, ce qui fait que 1pt vaut environ 1,333px et que 1pc (pica) vaut exactement 16px puisque 1pc équivaut à 12pt. Pour les unités métriques, 1cm vaut environ 37,8px (96 divisé par 2,54) et 1mm vaut environ 3,78px. Ces conversions sont surtout pertinentes pour les feuilles de style destinées à l'impression, où les points et les unités physiques correspondent réellement au papier, alors qu'à l'écran un pouce reste une abstraction CSS, pas une mesure physique réelle. Plutôt que de mémoriser ces facteurs ou de faire le calcul à la main, il suffit de coller n'importe quelle valeur dans ce convertisseur, qui renvoie l'équivalent en px, pt, pc, cm, mm et in simultanément, avec copie en un clic.

Ce sont toutes deux des unités de viewport égales à 1 % d'une dimension du viewport, mais elles retiennent des dimensions différentes. vmin correspond à 1 % du côté le plus petit du viewport, tandis que vmax correspond à 1 % du côté le plus grand. Sur un téléphone en mode portrait, où la largeur est le côté le plus petit, 10vmin suit la largeur et 10vmax suit la hauteur ; en passant en mode paysage, les deux s'inversent, car l'orientation change quel côté est le plus petit. Cela rend vmin utile pour des éléments qui doivent rester entièrement visibles dans les deux orientations, comme un carré qui ne doit jamais déborder, et vmax pratique quand on veut qu'un élément s'adapte à la dimension dominante. Les unités vw et vh classiques, elles, restent fixées respectivement à la largeur et à la hauteur. Ce convertisseur vous permet de saisir votre propre largeur et hauteur de viewport, puis montre comment une valeur se traduit en vw, vh, vmin et vmax pour cet écran précis.

La fonction clamp() prend trois valeurs, un minimum, une valeur préférée et un maximum, écrites sous la forme clamp(min, préférée, max). Le navigateur utilise la valeur préférée, mais ne la laisse jamais descendre sous le minimum ni dépasser le maximum. Pour une typographie fluide, la valeur préférée combine une base en rem avec un terme en vw afin que la taille augmente linéairement avec la largeur du viewport entre deux breakpoints, puis se bloque au minimum sur les petits écrans et au maximum sur les grands. Cela évite un texte qui saute brutalement à chaque breakpoint de media query et le fait plutôt évoluer en continu. Calculer la pente et l'ordonnée à l'origine à la main est fastidieux, alors le générateur de clamp de cet outil le fait pour vous : saisissez une taille minimale et maximale ainsi que la plage de viewport sur laquelle l'évolution doit se produire, choisissez une sortie en rem ou en px, et copiez la valeur clamp() finale directement dans votre feuille de style.