Convertitore px-rem

Un convertitore da px a rem trasforma una lunghezza CSS in pixel o rem nell'altra unità usando la dimensione del font radice che distribuisce davvero. Inserisca il valore numerico, scelga from e to come px o rem e imposti base sul font-size della radice (html) in pixel—di solito sedici sui browser desktop, a volte quattordici o diciotto nei design system. Lo strumento restituisce la magnitudine convertita, una stringa css pronta da incollare come one rem o sixteen px, la formula usata e la sostituzione passo passo così che token di design e revisioni di codice restino allineati. Migrazioni di temi, audit di tipografia fluida, passaggio da Figma a CSS e ridimensionamento dei font per accessibilità hanno tutti bisogno di quella stessa matematica deterministica rem uguale px su radice senza aprire un ispettore del browser.

Cosa significano px e rem per la tipografia CSS

In CSS una lunghezza in pixel (px) è un'unità di lunghezza assoluta usata in tutti i layout, i bordi e i token tipografici legacy. Una lunghezza in rem è relativa al font-size dell'elemento radice—quasi sempre l'elemento html—quindi un rem equivale a qualunque sia quel font-size radice in pixel. Se la radice è sedici pixel, allora sedici px equivalgono a un rem, trentadue px equivalgono a due rem e zero virgola cinque rem equivale a otto px.

I design system preferiscono il rem per le scale tipografiche e le spaziature perché gli utenti che ingrandiscono il font predefinito del browser, o che impostano una radice più grande per accessibilità, ottengono una crescita proporzionale senza dover cercare ogni pixel scritto a mano. Convertire nella direzione opposta conta quando una libreria emette ancora token in px o quando uno strumento di design esporta dimensioni fisse in pixel e le servono dichiarazioni rem che corrispondano alla radice di produzione.

La conversione in sé è elementare: rem è uguale a px diviso base, e px è uguale a rem moltiplicato base, dove base è il font-size radice in pixel. Ciò che manda in confusione i team non è la formula ma le basi non corrispondenti—dare per scontato sedici quando il foglio di stile imposta il font-size di html a sessantadue virgola cinque percento (dieci px) o a centododici virgola cinque percento (diciotto px).

Questo calcolatore obbliga a esplicitare la base così il risultato corrisponde sempre alla scala che dichiara di usare. Basi pari a zero o quasi zero vengono rifiutate perché la divisione per zero non è una lunghezza CSS valida; le demo in aula e i test unitari dovrebbero includere quel percorso di fallimento così che i client non trattino mai silenziosamente il rem come infinito.

Consigli pratici, limiti e ricerche correlate

Tenga value e base entro l'intervallo assoluto pubblicato così che i prodotti non possano traboccare in un risultato non finito che il risolutore deve rifiutare. Documenti il font-size radice accanto a ogni tabella di token: se html usa sessantadue virgola cinque percento del predefinito utente, base è dieci px per un predefinito user-agent di sedici pixel, e un titolo di ventiquattro px diventa due virgola quattro rem—non uno virgola cinque rem.

Quando from è uguale a to lo strumento restituisce il valore invariato così che le pipeline possano normalizzare le unità senza un caso speciale, ma la base è comunque richiesta e comunque validata come diversa da zero. Questa landing punta a chi cerca un convertitore da px a rem, un calcolatore da rem a px o uno strumento di tipografia con font-size radice CSS; non è un convertitore em relativo a un elemento genitore, non è un generatore di clamp fluidi e non è un calcolatore di unità del viewport.

Preferisca questa capacità quando conosce già la dimensione radice in pixel e le serve solo la conversione di lunghezza; se le servono stili calcolati dal vivo di una pagina reale, usi invece gli strumenti del browser. I controlli di andata e ritorno sono facili: converta px in rem e viceversa con la stessa base e confermi il valore originale entro lo stesso arrotondamento a dodici decimali.