341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
px, pt, em, rem, vw, vh, % : base configurable
Une même distance s'exprime de sept façons en CSS, et chacune se rapporte à autre chose : la racine du document, le parent, la largeur de la fenêtre, la hauteur, ou rien du tout. Cet outil convertit entre pixels, points, em, rem, unités de fenêtre et pourcentages, avec une base et une taille de fenêtre réglables, puisque le résultat en dépend. C'est ce qu'on ouvre devant une maquette exprimée en points, une valeur relevée dans un inspecteur, ou une conversion à faire dans les deux sens. Tout se calcule dans le navigateur.
Parce que les unités de fenêtre s'y rapportent directement : une largeur de 50 unités vaut la moitié de la fenêtre, donc une valeur en pixels qui change avec elle. Sans cette référence, la conversion n'aurait aucun sens. Les champs sont préremplis avec votre fenêtre actuelle.
Pour l'impression et pour les maquettes venues du monde de l'édition, où le point est l'unité de référence. À l'écran, la conversion est fixe : 72 points valent 96 pixels. En CSS d'écran, le pixel et le rem couvrent tous les besoins.
La hauteur pose problème : la barre d'adresse des navigateurs mobiles apparaît et disparaît au défilement, ce qui fait sauter la mise en page. Les unités dites petites, grandes et dynamiques existent pour cela, et une hauteur de 100 unités classiques sur un plein écran mobile reste le piège le plus fréquent.
Un résultat qui vous paraît faux, une valeur périmée, un cas qui manque ? Signalez-le à contact@topapps.fr