Convertidor de px a rem

Com utilitzar el convertidor de px a rem

1. Defineix la Mida de lletra arrel (px). Són 16 a tots els navegadors principals, tret que el teu full d’estils la canviï. Els botons que hi ha sota el camp canvien a 16 px, 10 px (el truc de html { font-size: 62.5%; }) o 18 px.
2. Si treballes amb em, defineix la Mida de lletra de l’element pare per a em (px): la mida de lletra calculada de l’element que conté el que estàs donant estil.
3. A Converteix un valor, escriu a Píxels (px), REM o EM. Els altres dos camps s’actualitzen mentre escrius, i la línia de sota mostra la divisió utilitzada.
4. La Taula de conversió en bloc llista mides habituals. Substitueix els Valors en píxels pels teus propis tokens de disseny (escala d’espaiat, escala tipogràfica…) i utilitza Copia la taula per enganxar el resultat en un full de càlcul o en un document de disseny.
5. Per migrar codi existent, enganxa’l a CSS per convertir, tria les opcions i fes clic a Converteix px a rem. Carrega un exemple mostra un petit full d’estils. Copia el CSS convertit amb Copia.

Les fórmules

• rem = px ÷ mida de lletra arrel. Amb els 16 px per defecte, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ mida de lletra de l’element pare. Dins d’un títol de 20 px, 10px = 0,5em.
• px = rem × mida de lletra arrel, i px = em × mida de lletra de l’element pare.

rem o em: quin he de fer servir?

El rem («root em») sempre es refereix a la mida de lletra de l’element html, de manera que 1.5rem vol dir el mateix a tota la pàgina. És l’opció més segura per a mides de lletra, espaiats, amplades màximes i buits de maquetació.

L’em es refereix a la mida de lletra de l’element mateix (per a font-size, la del pare). S’acumula: una llista de 0,9em niada tres vegades acaba en 0,9 × 0,9 × 0,9 = 73 % de la base. Això fa que l’em sigui pràctic per a coses que han d’escalar amb el seu propi text (el farciment d’un botó, la mida d’una icona al costat d’una etiqueta) i arriscat per a la tipografia global.

Per què el rem és important per a l’accessibilitat

Moltes persones augmenten la mida de lletra per defecte a la configuració del navegador (per exemple de 16 a 20 o 24 px) en lloc d’ampliar cada pàgina. Les mides escrites en px ignoren aquesta preferència; les mides en rem o em la segueixen. Utilitzar rem per al text i l’espaiat permet que tota la maquetació creixi segons l’elecció del lector, cosa que ajuda amb el criteri d’èxit 1.4.4 de WCAG 2.2 (canvi de mida del text fins al 200 %).

Per la mateixa raó, evita definir html { font-size: 16px; } en px: fes servir un percentatge (100%, o 62.5% si vols que 1rem = 10px) perquè la configuració de l’usuari continuï aplicant-se.

Què canvia el convertidor de CSS

Substitueix els nombres seguits de px a les declaracions pel valor dividit per la mida de lletra arrel. Mai no toca comentaris, cadenes de text ni valors url().

• Conserva en px les amplades de vora i de contorn: border, border-*-width, outline, outline-offset i column-rule es queden en px, de manera que les línies fines continuen nítides. border-radius sí que es converteix.
• Conserva els valors d‘1px: qualsevol valor entre −1px i 1px es queda tal com és.
• Converteix les media queries a em (base de 16px): a les condicions @media, el rem i l’em sempre es refereixen a la mida de lletra inicial del navegador, mai a la teva regla html, de manera que l’eina divideix per 16 i hi escriu em, sigui quina sigui la mida arrel. Si està desmarcada, les media queries conserven els px.