PX to REM convertitore
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 |