Convertissez entre pixels (PX), rem racine (REM) et em (EM) avec ce simple calculateur. Essentiel pour la conception et le développement web réactifs.
Convertissez entre les pixels (PX), le rem (REM) et l'em (EM). Entrez une valeur dans n'importe quel champ pour voir les valeurs équivalentes dans les autres unités.
Comprendre et convertir entre les unités CSS est essentiel pour le design et le développement web réactifs. Les unités PX (pixel), REM (root em) et EM sont des éléments fondamentaux qui déterminent comment les éléments sont dimensionnés et positionnés sur différents appareils et tailles d'écran. Cet outil de conversion d'unités complet vous permet de traduire facilement des valeurs entre ces trois unités CSS critiques, vous aidant à créer des mises en page web plus flexibles et maintenables.
Les pixels (PX) sont des unités de taille fixe qui offrent un contrôle précis mais manquent de scalabilité, tandis que les unités REM se mettent à l'échelle par rapport à la taille de police de l'élément racine, et les unités EM se mettent à l'échelle par rapport à la taille de police de leur élément parent. La conversion entre ces unités peut être difficile, surtout lorsqu'on travaille avec des conceptions complexes ou lorsqu'on prend en charge des fonctionnalités d'accessibilité telles que le redimensionnement du texte. Notre convertisseur PX, REM et EM simplifie ce processus, vous permettant de vous concentrer sur la création de conceptions réactives et esthétiques.
Les pixels (PX) sont l'unité CSS la plus basique et la plus couramment utilisée. Un pixel est un seul point dans une grille d'image numérique et représente le plus petit élément contrôlable sur un écran. En CSS, les pixels fournissent une unité de mesure de taille fixe qui reste constante indépendamment des autres facteurs de style.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6Caractéristiques clés des pixels :
Les unités REM (root em) sont des unités relatives qui se mettent à l'échelle en fonction de la taille de police de l'élément racine (généralement l'élément <html>). Par défaut, la plupart des navigateurs définissent la taille de police racine à 16px, ce qui rend 1rem égal à 16px, sauf indication contraire.
1html {
2 font-size: 16px; /* Par défaut dans la plupart des navigateurs */
3}
4
5.element {
6 width: 12.5rem; /* Équivalent à 200px avec la taille de police racine par défaut */
7 font-size: 1rem; /* Équivalent à 16px */
8 margin: 0.625rem; /* Équivalent à 10px */
9}
10Caractéristiques clés des unités REM :
Les unités EM sont des unités relatives qui se mettent à l'échelle en fonction de la taille de police de leur élément parent. Si aucune taille de police n'est spécifiée pour le parent, les EM feront référence à la taille de police héritée.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Équivalent à 16px (20px × 0.8) */
7 margin: 0.5em; /* Équivalent à 8px (16px × 0.5) */
8}
9Caractéristiques clés des unités EM :
Comprendre les relations mathématiques entre les unités PX, REM et EM est crucial pour des conversions précises. Voici les formules utilisées dans notre convertisseur :
Pour convertir des pixels en unités REM, divisez la valeur en pixels par la taille de police racine :
Par exemple, avec la taille de police racine par défaut de 16px :
Pour convertir des pixels en unités EM, divisez la valeur en pixels par la taille de police de l'élément parent :
Par exemple, avec une taille de police parent de 16px :
Pour convertir des unités REM en pixels, multipliez la valeur REM par la taille de police racine :
Par exemple, avec la taille de police racine par défaut de 16px :
Pour convertir des unités EM en pixels, multipliez la valeur EM par la taille de police de l'élément parent :
Par exemple, avec une taille de police parent de 16px :
Pour convertir des unités REM en unités EM, vous devez tenir compte à la fois de la taille de police racine et de la taille de police de l'élément parent :
Si la taille de police racine et parent sont identiques (par exemple, 16px), alors 1rem = 1em.
Pour convertir des unités EM en unités REM, utilisez la formule suivante :
Encore une fois, si les deux tailles de police sont égales, alors 1em = 1rem.
Notre outil de conversion d'unités facilite la traduction des valeurs entre les unités PX, REM et EM. Voici un guide étape par étape pour utiliser le convertisseur efficacement :
<html> de votre projetComprendre quand utiliser chaque unité CSS et comment les convertir est crucial pour un développement web efficace. Voici quelques applications pratiques et scénarios où notre convertisseur s'avère inestimable :
La conversion entre unités est essentielle pour créer des conceptions véritablement réactives :
1/* Convertir des valeurs fixes en pixels en unités REM réactives */
2.container {
3 /* De : padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* De : margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9L'utilisation d'unités relatives améliore l'accessibilité en respectant les préférences des utilisateurs :
Les systèmes de design modernes bénéficient d'une utilisation réfléchie des unités :
Créer une typographie harmonieuse nécessite une sélection d'unités soigneuse :
1/* Système typographique utilisant des unités REM */
2h1 { font-size: 2.5rem; } /* 40px */
3h2 { font-size: 2rem; } /* 32px */
4h3 { font-size: 1.5rem; } /* 24px */
5h4 { font-size: 1.25rem; } /* 20px */
6p { font-size: 1rem; } /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8Lors de l'implémentation de conceptions provenant d'outils comme Figma ou Photoshop :
Bien que les unités PX, REM et EM soient les plus courantes, il existe des alternatives à considérer :
L'histoire des unités CSS reflète l'évolution plus large du design web, des mises en page statiques aux approches réactives et accessibles d'aujourd'hui.
Dans les premiers jours du CSS, les pixels régnaient en maître. Les designers web créaient des mises en page à largeur fixe, généralement de 640px ou 800px de large pour s'adapter aux résolutions d'écran courantes. L'accessibilité et la diversité des appareils n'étaient pas des préoccupations majeures, et le contrôle parfait des pixels était l'objectif principal.
Alors que les tailles d'écran se diversifiaient, les mises en page basées sur des pourcentages gagnaient en popularité. Les designers ont commencé à créer des conceptions plus flexibles, bien que la typographie soit souvent restée en unités de pixels. Cette époque a vu l'introduction des unités EM dans CSS, bien que leur adoption ait été limitée en raison de la complexité de la gestion des tailles de police en cascade.
L'introduction de l'iPhone en 2007 a transformé le design web. Soudain, les sites web devaient fonctionner sur des écrans aussi petits que 320px de large. Cela a catalysé l'intérêt pour les techniques de design réactif et les unités relatives. Les limitations des unités EM (en particulier l'effet de cascade) sont devenues plus apparentes à mesure que les conceptions devenaient plus complexes.
L'article influent d'Ethan Marcotte sur le design web réactif en 2010 a changé la façon dont les développeurs abordaient les unités CSS. L'unité REM a été introduite dans CSS3, offrant les avantages de l'échelle relative sans les complications de cascade des unités EM. Le support des navigateurs pour les unités REM a progressivement augmenté au cours de cette période.
Le développement web d'aujourd'hui adopte un mélange d'unités pour différents usages :
Cette évolution reflète la transition du web d'un support basé sur des documents à une plateforme d'application complexe qui doit fonctionner sur d'innombrables appareils et contextes.
1// Convertir entre les unités PX, REM et EM
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// Exemple d'utilisation
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
311:root {
2 /* Tailles de police de base */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Valeurs en pixels courantes converties en REM */
7 --space-4px: 0.25rem;
8 --space-8px: 0.5rem;
9 --space-16px: 1rem;
10 --space-24px: 1.5rem;
11 --space-32px: 2rem;
12 --space-48px: 3rem;
13
14 /* Échelle typographique */
15 --text-xs: 0.75rem; /* 12px */
16 --text-sm: 0.875rem; /* 14px */
17 --text-base: 1rem; /* 16px */
18 --text-lg: 1.125rem; /* 18px */
19 --text-xl: 1.25rem; /* 20px */
20 --text-2xl: 1.5rem; /* 24px */
21}
22
23/* Exemple d'utilisation */
24.card {
25 padding: var(--space-16px);
26 margin-bottom: var(--space-24px);
27 font-size: var(--text-base);
28}
29
30.card-title {
31 font-size: var(--text-xl);
32 margin-bottom: var(--space-8px);
33}
341// Fonctions SCSS pour la conversion d'unités
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// Exemple d'utilisation
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // Utilisation de la taille de police parent (18px) pour la conversion en em
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
261def px_to_rem(px, root_font_size=16):
2 """Convertir des pixels en unités REM"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Convertir des unités REM en pixels"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Convertir des pixels en unités EM"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Convertir des unités EM en pixels"""
15 return em * parent_font_size
16
17# Exemple d'utilisation
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21Les unités REM (root em) sont relatives à la taille de police de l'élément racine (généralement l'élément <html>), tandis que les unités EM sont relatives à la taille de police de leur élément parent. Cette différence clé signifie que les unités REM maintiennent une taille cohérente dans tout votre document, indépendamment de l'imbrication, tandis que les unités EM peuvent créer un effet de cumul lorsque les éléments sont imbriqués.
Il n'y a pas une seule "meilleure" unité pour toutes les situations. Une combinaison d'unités est généralement la plus efficace :
L'approche idéale est d'utiliser chaque unité pour ce qu'elle fait le mieux dans un système cohérent.
La valeur par défaut de 16px a été établie comme une norme de lisibilité qui fonctionne bien sur les appareils. Des recherches ont montré que le texte autour de 16px est optimal pour la lecture sur des écrans à des distances de visualisation typiques. Cette valeur par défaut fournit également une bonne base pour l'accessibilité, garantissant que le texte n'est pas trop petit pour la plupart des utilisateurs.
Oui, CSS prend en charge les valeurs négatives pour de nombreuses propriétés en utilisant n'importe quel type d'unité. Les marges négatives, les translations et les positions sont des cas d'utilisation courants pour les valeurs négatives. Notre convertisseur gère correctement les valeurs négatives pour tous les types d'unités.
Les unités EM se cumulent lorsque les éléments sont imbriqués. Par exemple :
1.parent {
2 font-size: 16px;
3}
4.child {
5 font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8 font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10Cet effet de cumul peut être utile pour créer des conceptions proportionnelles, mais nécessite une gestion soigneuse pour éviter un redimensionnement involontaire.
Les navigateurs gèrent les valeurs subpixel différemment. Certains navigateurs arrondissent à l'entier le plus proche, tandis que d'autres prennent en charge le rendu subpixel pour un redimensionnement plus fluide. Cela peut parfois entraîner de légères incohérences entre les navigateurs, en particulier avec de petites valeurs REM/EM ou lors de l'utilisation de transformations. Pour la plupart des cas d'utilisation, ces différences sont négligeables.
Il n'y a pas de différence significative de performance entre l'utilisation de pixels, REM ou EM dans les navigateurs modernes. Le choix des unités doit être basé sur les exigences de conception, le comportement réactif et les besoins d'accessibilité plutôt que sur des considérations de performance.
"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
Marcotte, Ethan. "Responsive Web Design." A List Apart, 25 mai 2010. https://alistapart.com/article/responsive-web-design/
Rutter, Richard. "The Elements of Typographic Style Applied to the Web." http://webtypography.net/
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
Coyier, Chris. "The Lengths of CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
"Using CSS custom properties (variables)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
"Understanding and Using rem Units in CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Cessez de lutter avec des conversions d'unités CSS manuelles et laissez notre convertisseur d'unités PX, REM et EM faire le travail pour vous. Que vous construisiez un site web réactif, créiez un système de design ou que vous appreniez simplement sur les unités CSS, cet outil vous fera gagner du temps et garantira l'exactitude. Entrez vos valeurs maintenant pour voir à quel point la conversion d'unités peut être facile !
Découvrez plus d'outils qui pourraient être utiles pour votre flux de travail