PX to REM convertitore

px
rem
Calcolo basato su un font-size del :root pari a ️ pixel.

Cos'è il REM e perché è utile nella progettazione web?

Quando si progetta un sito web, è essenziale utilizzare unità di misura scalabili e flessibili, che garantiscano un’esperienza utente ottimale su diversi dispositivi. REM (Root EM) è un’unità di misura che sta diventando sempre più importante in web design e sviluppo front-end. A differenza dei pixel (PX), i REM sono relativi al valore del font-size dell’elemento radice della pagina (di solito il tag html). Ciò significa che, impostando un valore di base come 16px, 1 REM sarà uguale a 16px, 2 REM sarà 32px, e così via. Questo rende il layout della pagina adattabile, migliorando l’accessibilità e la leggibilità.

Vantaggi dell'utilizzo dei REM

  • Flessibilità: I REM permettono un controllo globale della dimensione dei caratteri, dei margini e dei padding con un singolo valore di riferimento, come il font-size del documento. Cambiando questo valore, si può adattare l’intera pagina con una sola modifica.

  • Accessibilità: Grazie ai REM, gli utenti possono scalare le dimensioni del testo nelle impostazioni del browser, cosa che non è possibile con i valori assoluti come i pixel. Questo migliora l’accessibilità per utenti con difficoltà visive.

  • Responsive design: Utilizzare REM rende più facile adattare il design su dispositivi mobili e schermi più piccoli, mantenendo la proporzione del layout senza la necessità di modificare manualmente ogni valore in pixel.

Tabella di Conversione da PX a REM e viceversa

Questa tabella PX-REM è un semplice riferimento comparativo che mostra le conversioni più comuni tra pixel (PX) e REM, con un font-size di riferimento standard di 16px. È utile per chi ha bisogno di un colpo d’occhio sui valori equivalenti.

PX REM (PX to REM) REM PX (REM to PX)
1px 0.062rem 0.062rem 1px
2px 0.125rem 0.125rem 2px
3px 0.188rem 0.188rem 3px
4px 0.25rem 0.25rem 4px
5px 0.312rem 0.312rem 5px
6px 0.375rem 0.375rem 6px
7px 0.438rem 0.438rem 7px
8px 0.5rem 0.5rem 8px
9px 0.562rem 0.562rem 9px
10px 0.625rem 0.625rem 10px
11px 0.688rem 0.688rem 11px
12px 0.75rem 0.75rem 12px
13px 0.812rem 0.812rem 13px
14px 0.875rem 0.875rem 14px
15px 0.938rem 0.938rem 15px
16px 1.0rem 1.0rem 16px
17px 1.062rem 1.062rem 17px
18px 1.125rem 1.125rem 18px
19px 1.188rem 1.188rem 19px
20px 1.25rem 1.25rem 20px
21px 1.312rem 1.312rem 21px
22px 1.375rem 1.375rem 22px
23px 1.438rem 1.438rem 23px
24px 1.5rem 1.5rem 24px
25px 1.562rem 1.562rem 25px
26px 1.625rem 1.625rem 26px
27px 1.688rem 1.688rem 27px
28px 1.75rem 1.75rem 28px
29px 1.812rem 1.812rem 29px
30px 1.875rem 1.875rem 30px
31px 1.938rem 1.938rem 31px
32px 2.0rem 2.0rem 32px
33px 2.062rem 2.062rem 33px
34px 2.125rem 2.125rem 34px
35px 2.188rem 2.188rem 35px
36px 2.25rem 2.25rem 36px
37px 2.312rem 2.312rem 37px
38px 2.375rem 2.375rem 38px
39px 2.438rem 2.438rem 39px
40px 2.5rem 2.5rem 40px
41px 2.562rem 2.562rem 41px
42px 2.625rem 2.625rem 42px
43px 2.688rem 2.688rem 43px
44px 2.75rem 2.75rem 44px
45px 2.812rem 2.812rem 45px
46px 2.875rem 2.875rem 46px
47px 2.938rem 2.938rem 47px
48px 3.0rem 3.0rem 48px
49px 3.062rem 3.062rem 49px
50px 3.125rem 3.125rem 50px
51px 3.188rem 3.188rem 51px
52px 3.25rem 3.25rem 52px
53px 3.312rem 3.312rem 53px
54px 3.375rem 3.375rem 54px
55px 3.438rem 3.438rem 55px
56px 3.5rem 3.5rem 56px
57px 3.562rem 3.562rem 57px
58px 3.625rem 3.625rem 58px
59px 3.688rem 3.688rem 59px
60px 3.75rem 3.75rem 60px
61px 3.812rem 3.812rem 61px
62px 3.875rem 3.875rem 62px
63px 3.938rem 3.938rem 63px
64px 4.0rem 4.0rem 64px
65px 4.062rem 4.062rem 65px
66px 4.125rem 4.125rem 66px
67px 4.188rem 4.188rem 67px
68px 4.25rem 4.25rem 68px
69px 4.312rem 4.312rem 69px
70px 4.375rem 4.375rem 70px
71px 4.438rem 4.438rem 71px
72px 4.5rem 4.5rem 72px
73px 4.562rem 4.562rem 73px
74px 4.625rem 4.625rem 74px
75px 4.688rem 4.688rem 75px
76px 4.75rem 4.75rem 76px
77px 4.812rem 4.812rem 77px
78px 4.875rem 4.875rem 78px
79px 4.938rem 4.938rem 79px
80px 5.0rem 5.0rem 80px
81px 5.062rem 5.062rem 81px
82px 5.125rem 5.125rem 82px
83px 5.188rem 5.188rem 83px
84px 5.25rem 5.25rem 84px
85px 5.312rem 5.312rem 85px
86px 5.375rem 5.375rem 86px
87px 5.438rem 5.438rem 87px
88px 5.5rem 5.5rem 88px
89px 5.562rem 5.562rem 89px
90px 5.625rem 5.625rem 90px
91px 5.688rem 5.688rem 91px
92px 5.75rem 5.75rem 92px
93px 5.812rem 5.812rem 93px
94px 5.875rem 5.875rem 94px
95px 5.938rem 5.938rem 95px
96px 6.0rem 6.0rem 96px
97px 6.062rem 6.062rem 97px
98px 6.125rem 6.125rem 98px
99px 6.188rem 6.188rem 99px
100px 6.25rem 6.25rem 100px
Menu
Seguici su