Pixel ↔ REM
Converteix entre píxels i REM per a CSS
Com usar Pixel ↔ REM
Converteix entre píxels i REM per a CSS Eina gratuïta en línia, sense registre, sense anuncis intrusius. Utilitza-la ara.
Per què els desenvolupadors web converteixen entre píxels i REM?
Les bones pràctiques modernes de CSS prefereixen les unitats relatives (REM, EM) sobre els píxels absoluts per a les mides de lletra i els espaiats. Això garanteix que els usuaris que configuren una mida de lletra més gran en les preferències del seu navegador vegin el text escalar proporcionalment — un requisit fonamental d'accessibilitat web.
- Mida de la lletra: En lloc de
font-size: 16px, feu servirfont-size: 1rem. Si la mida de lletra base del navegador d'un usuari és 20px, tot escala proporcionalment — garantint una bona experiència per a les persones amb discapacitat visual que augmenten la mida de lletra del sistema. - Espaiat i padding: Els marges i el padding en REM s'adapten a les preferències de lletra de l'usuari.
padding: 1.5remés més accessible quepadding: 24pxi respecta la configuració personal de l'usuari. - Implementació de sistemes de disseny: Les eines de disseny (Figma, Sketch) exporten en píxels. Convertiu en REM abans d'escriure CSS perquè el sistema de disseny sigui accessible des del primer moment.
- Media queries: Les media queries basades en REM respecten les preferències de mida de lletra de l'usuari.
@media (min-width: 48rem)s'activa a 768px per a una base de 16px, però a un valor de píxels més alt per als usuaris amb lletres més grans. - Biblioteques de components: Construir components reutilitzables en REM garanteix que es comportin de manera consistent en diferents contextos de mida de lletra base — important per als que creen sistemes de disseny compartits.
REM vs EM: REM (Root EM) és sempre relatiu a la mida de lletra de l'element arrel (html) — consistent i previsible en tot el document. EM és relatiu a la mida de lletra de l'element actual — pot acumular-se de manera inesperada en elements niats. REM és preferible per a la majoria de casos d'ús.
Frequently Asked Questions
Quina és la mida de lletra per defecte del navegador?
El valor per defecte és 16px en tots els navegadors principals (Chrome, Firefox, Safari, Edge). Els usuaris poden canviar-lo en la configuració del navegador — i aquest és tot el propòsit de fer servir REM. 1rem = 16px per defecte, però pot ser 18px, 20px o fins i tot 12px depenent de les preferències de l'usuari.
Per què alguns desenvolupadors fan servir html { font-size: 62.5% }?
Establir la mida de lletra arrel al 62,5% de 16px = 10px facilita el càlcul mental: 1,6rem = 16px, 2,4rem = 24px. Però substitueix la mida de lletra preferida de l'usuari, contrariant parcialment l'objectiu d'accessibilitat dels REMs. Una millor aproximació és fer servir calc() de CSS o simplement dividir per 16 els valors en píxels.
Quan he de fer servir PX en lloc de REM?
Feu servir PX per a les vores (les vores d'1px han de continuar sent sempre 1px), les ombres de caixa i els elements on la mida exacta en píxels importa independentment de les preferències de lletra. Feu servir REM per a les mides de lletra, el padding, els marges i qualsevol espaiat que hagi d'escalar amb el text per a una millor accessibilitat.
Quina diferència hi ha entre REM, EM i PX?
PX és absolut — sempre la mateixa mida independentment de la configuració. EM és relatiu a la mida de lletra de l'element pare — pot acumular-se en elements niats. REM és relatiu a la mida de lletra arrel — consistent en tot el document. Per a un disseny accessible, preferiu REM sobre PX per a les mides de lletra i els espaiats.
Com converto tot un disseny de píxels a REM?
Dividiu cada valor en píxels per la mida de lletra arrel (per defecte: 16). Així 24px ÷ 16 = 1,5rem. Les funcions Sass (px-to-rem()) o els plugins PostCSS poden automatitzar aquesta conversió en tota una base de codi. Hi ha també extensions de VS Code que converteixen automàticament en escriure.
REM vs EM vs PX vs VW/VH vs percentatges
PX és absolut — precís però no adaptatiu. REM escala amb la mida de lletra arrel — millor per a tipografia i espaiat accessible. EM escala amb la mida de lletra de l'element pare — útil per a espaiats a nivell de component. VW/VH són percentatges de la finestra gràfica — útils per a maquetes fluides. Els percentatges són relatius a l'element pare — essencials per a les amplades responsives. El CSS modern combina: REM per a tipografia i espaiats, VW/VH per a la maqueta general i percentatges per a les amplades de les columnes.