La prima volta che un designer mi ha consegnato una specifica che diceva & quot; body text 16px, intestazioni 28px, small print 13px" e il lead front-end ha detto & quot; ma spediamo tutto in rem, & quot; Ho fatto la divisione a mano in un'app di calcolatrice Sedici su sedici fa uno, ventotto su sedici fa un punto sette cinque, tredici su sedici fa zero punto otto uno due cinque Poi la dimensione del font di base è cambiata in dieci pixel per un & quot;62,5% & quot; setup su un progetto diverso, e ho fatto tutto di nuovo Dopo la terza volta ho costruito un piccolo convertitore nel flusso di lavoro Toolz.dev, e mi ha tranquillamente salvato da errori aritmetici su quasi tutti i componenti che ho acconciato da allora.
tl; dr: Un convertitore di unità CSS trasforma un valore in un'unità - px, rem, em, pt o % - nel valore equivalente in ogni altra unità, in base alla dimensione del carattere root che controlli (16 px per impostazione predefinita) Per convertire px in rem, dividi i pixel per la dimensione del carattere root:
24px ÷ 16 = 1.5rem. Per andare dall'altra parte, moltiplicare:1.5rem × 16 = 24px. la Convertitore di unità CSS lo fa istantaneamente per ogni unità contemporaneamente, viene eseguito interamente nel browser e include una tabella di riferimento px-to-rem da cui è possibile copiare.
Questa guida copre il modo in cui le unità si relazionano, perché la dimensione del carattere di base conta così tanto, quando raggiungere per ogni unità e i calcoli esatti eseguiti dal convertitore Ho disegnato molte interfacce tra i temi di WordPress, l'interfaccia utente di amministrazione di WP Adminify e i dashboard React e la domanda sull'unità viene fuori in tutti Le regole sono semplici una volta che vedi il singolo numero su cui tutto è appeso.
Perché la conversione da px a rem è importante?
I pixel sono l'unità che quasi ogni strumento di progettazione esporta Figma, Sketch e Photoshop pensano tutti in pixel, quindi una specifica di trasferimento è un elenco di valori di pixel Anche i pixel sono facili da ragionare perché un pixel CSS è una dimensione di riferimento fissa che non cambia quando l'utente regola qualcosa.
Quella fissità è esattamente il problema per le interfacce accessibili e reattive Quando qualcuno aumenta il proprio browser's dimensione predefinita del carattere - un'impostazione su cui si basano molte persone con ipovisione - il testo dimensionato in pixel fissi ignora completamente il cambiamento Il testo dimensionato in rem si ridimensiona con esso Lo stesso vale per lo zoom del browser su alcune configurazioni più vecchie e per i fogli di stile degli utenti Se vuoi che la tua tipografia rispetti le preferenze di reader's, lo ridimensiona in un'unità relativa e rem è quello che si comporta in modo prevedibile su un'intera pagina.
Quindi il flusso di lavoro comune è: design in pixel, ship in rem. Ciò ti lascia fare divisione tutto il giorno, e la divisione è dove si insinuano piccoli errori Scrittura 0.8125rem invece di 0.875rem per un valore 13 px è il tipo di errore di battitura che spedisce alla produzione e fa sembrare un'etichetta sottilmente sbagliata Un convertitore rimuove quel rischio, che è l'intera ragione per cui ne tengo uno a portata di mano Se lavori su un sacco di queste attività, il più ampio Toolkit per sviluppatori web coperture in cui la conversione dell'unità si adatta agli altri lavori quotidiani.
Qual è la differenza tra px, rem, em, pt e %?
Ognuna di queste unità si risolve in un numero di pixel CSS al momento del rendering, una relazione Valori e unità CSS Livello 4 pin verso il basso: il pixel di riferimento è definito rispetto a un display a 96 dpi, non rispetto allo schermo La differenza è ciò su cui vengono misurati.
px è il pixel di riferimento CSS È un'unità assoluta nel senso che non dipende da alcuna dimensione del carattere. 1px è 1px. Ciò lo rende prevedibile ma anche non risponde alle preferenze dell'utente.
rem significa & quot;root em." Un rem equivale alla dimensione del carattere dell'elemento radice - il html elemento. Per impostazione predefinita è 16px, quindi 1rem è 16px, 1.5rem è 24px, e 0.5rem è 8px. Poiché è sempre legato alla radice, un valore rem significa la stessa cosa ovunque nel documento, non importa quanto profondamente sia annidato l'elemento.
em è relativo alla dimensione del carattere del corrente elemento. Se un elemento's dimensione del carattere è 20px, allora 1em all'interno è 20px, 1.5em è 30 px, e così via Il problema è che em si compone: se un genitore imposta font-size: 1.2em e un bambino anche imposta 1.2em, il bambino's dimensione effettiva è 1,2 × 1,2 del nonno Questo strumento assume un elemento dimensionato alla base, quindi em e rem leggere lo stesso - e si modella un contesto em specifico impostando la dimensione del carattere di base a tale elemento's dimensione.
pt è il punto, ereditato dalla tipografia di stampa CSS definisce un pollice come 96 pixel e 72 punti, quindi 1pt uguale a 96/72 ≈ 1,333px e 1px uguale a 0,75pt. i punti appartengono ai fogli di stile di stampa; sullo schermo sono solo un multiplo fisso del pixel di riferimento.
% per la dimensione del carattere è una percentuale del genitore (o, alla radice, la base). 100% uguale alla dimensione di riferimento e 50% uguale alla metà. Ad una base di 16 px, 100% è 16 px e 150% è 24 px.
Ecco come si allineano i valori comuni alla radice predefinita 16px:
| px | rem | em | pt | % |
|---|---|---|---|---|
| 12 | 0,75 | 0,75 | 9 | 75 |
| 14 | 0,875 | 0,875 | 10.5 | 87,5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112.5 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 32 | 2 | 2 | 24 | 200 |
la Convertitore di unità CSS genera l'intera tabella per qualsiasi base impostata, in modo da poter osservare un'intera scala di tipi contemporaneamente.
Come fa la dimensione del carattere di base a cambiare tutto?
La dimensione del carattere di base (root) è il perno per ogni unità relativa Cambialo e ogni conversione rem, em e % cambia con esso, mentre px e pt rimangono messi.
Il valore predefinito del browser è 16px, motivo per cui 1rem è normalmente 16px. Ma puoi impostare la radice su qualsiasi cosa Un modello popolare imposta html { font-size: 62.5%; }, che rende la radice 10px (62,5% di 16) Ora 1rem è pulito 10px, e la matematica rem diventa & quot; sposta il punto decimale": 1.6rem è 16px, 2.4rem è 24px, 0.8rem è 8px I team adottano questo in modo che i numeri nei loro fogli di stile leggano quasi come pixel mentre sono ancora in scala con le preferenze dell'utente.
Per modellarlo nel convertitore, imposta la dimensione del carattere di base su 10 e leggi la colonna rem. Un valore 24px ora viene visualizzato come 2.4rem invece di 1.5rem. Questo è anche il modo in cui si ragiona su em in un componente che imposta la propria dimensione del carattere: se una scheda imposta font-size: 20px, quindi i valori em al suo interno sono relativi a 20, quindi imposta la base su 20 per vedere cosa 1.5em risolve a.
L'errore che vedo più spesso è dimenticare su quale base è stato calcolato un valore Qualcuno converte 24px in 1.5rem assumendo una radice 16px, quindi la fa cadere in un progetto che esegue il trucco del 62.5% dove la radice è 10px - e 1.5rem c'è 15px, non 24px L'unità è relativa, quindi il numero significa qualcosa solo una volta che conosci la base Ogni volta che incollo un valore rem tra i progetti, controllo prima la dimensione del carattere root.
Come si fa a convertire px in rem e rem in px a mano?
La matematica è una divisione e una moltiplicazione.
da PX a Rem: dividi il valore del pixel per la dimensione del carattere root.
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
da Rem a px: moltiplica il valore rem per la dimensione del carattere root.
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px a em utilizza la stessa formula di rem quando l'elemento si trova alla dimensione del carattere di base, quindi 24px ÷ 16 = 1.5em. La differenza è concettuale, non aritmetica: em viene misurato rispetto all'elemento corrente, quindi se la dimensione di quell'elemento's differisce dalla radice, usi la sua dimensione come base.
da px a pt: moltiplica per 0,75, perché 1px = 0.75pt. di sì 16px × 0.75 = 12pt. Andando dall'altra parte, pt × 1.333 = px.
da PX a %: dividi per la base e moltiplica per 100. quindi 24px ÷ 16 × 100 = 150%.
Niente di tutto questo è difficile, ma farlo quaranta volte mentre si modella un componente è dove la fatica produce errori di battitura Questo è esattamente il tipo di compito ripetitivo e soggetto a errori Strumenti di produttività per sviluppatori la filosofia dice di automatizzare: scarica l'aritmetica in modo che la tua attenzione rimanga sul design.
Quando dovresti usare ogni unità?
Non esiste un'unica unità corretta; esiste un'unità giusta per ogni lavoro.
Usare rem per le dimensioni dei caratteri. Questa è la raccomandazione più forte nell'elenco. Rem si adatta con la preferenza per la dimensione del carattere del browser user's, che è una vera vittoria in termini di accessibilità, e poiché è ancorato alla radice non si compone inaspettatamente. La maggior parte dei team si dimensiona in tutto il proprio tipo in rem.
Usare rem o px per la spaziatura, a seconda del sistema. Molti sistemi di progettazione esprimono margine e imbottitura in rem in modo che le scale di spaziatura con il tipo Altri mantengono la spaziatura in px per layout pixel-perfetti Entrambi sono difendibili; scegline uno e sii coerente.
Usa em per cose che dovrebbero scalare con il proprio elemento. Imbottitura su un pulsante che dovrebbe crescere con il pulsante's dimensione del carattere è un classico uso em - impostare il riempimento in em e tiene traccia del testo automaticamente Dimensionamento dell'icona rispetto al testo adiacente è un altro.
Usa px per bordi e dettagli fini. un' 1px confine dovrebbe rimanere di solito 1px; raramente desideri che un'attaccatura dei capelli si ridimensiona con la dimensione del carattere Anche i punti di interruzione delle query multimediali sono spesso scritti in px, anche se alcuni preferiscono em lì per il comportamento dello zoom.
Usare pt solo nei fogli di stile di stampa. Se stai stilizzando qualcosa per @media print, i punti sono l'unità nativa di stampa e vale la pena utilizzarli Sullo schermo, preferire px o rem.
Utilizzare % per larghezze di fluido e occasionalmente dimensioni dei caratteri. La percentuale è ovunque nel layout (width: 50%), e come dimensione del carattere a volte viene utilizzato alla radice per il trucco del 62,5%.
Quali sono gli errori comuni con le unità CSS?
Il primo è il problema di mancata corrispondenza di base già descritto: convertire contro la dimensione del carattere di root sbagliata Conosci sempre la tua root prima di fidarti di un numero rem.
Il secondo sono valori rem troppo precisi Alcune conversioni non si dividono uniformemente - 15px a una base di 16px è 0,9375rem, e 13px è 0,8125rem Quei decimali lunghi sono esatti ma brutti, e arrotondandoli troppo forte (diciamo a 0,94rem) si sposta la dimensione renderizzata di una frazione di pixel La mia regola: tenere tre o quattro decimali per rem, o scegliere valori di base e dimensione che si dividono in modo pulito Il convertitore gira sensibilmente e taglia gli zeri finali in modo 24px legge come 1.5rem anziché 1.5000rem.
Il terzo è la composizione di em. Gli elementi di nidificazione che ogni set di una dimensione del carattere em moltiplica l'effetto, quindi un elemento profondamente annidato può finire molto più grande o più piccolo del previsto Se trovi che sia sorprendente, quella composizione è quasi sempre il motivo - cambiali in rem e la sorpresa scompare.
Il quarto presuppone che pt e px siano intercambiabili. Non lo sono; 12pt è 16px, no 12px. Mescolarli in un foglio di stile che si estende su schermo e stampa è un bug sottile.
Come gestisce la matematica il convertitore Toolz.dev?
Sotto il cofano il convertitore usa un'idea: esprimere ogni unità come un numero di pixel, quindi convertire attraverso i pixel Ogni unità ha un & quot; pixel fisso per unità& quot; data la dimensione del carattere di base - px è 1, rem ed em sono la base, pt è 96/72, e % è base/100 Per convertire, moltiplica l'input per la sua unità's pixels-per-unità per ottenere un valore di pixel, quindi divide per l'unità di destinazione's pixels-per-unità Quel singolo passaggio dà ogni unità in una volta, che è il motivo per cui vedi px, rem, em, pt, e % aggiornare insieme come digiti.
Analizza anche i valori con le unità collegate, quindi incollando 24px compila sia il numero che l'unità per te I risultati vengono arrotondati a poche cifre decimali e privati degli zeri finali per la leggibilità, e ognuno ha un pulsante di copia con un clic che copia il valore con il suo suffisso unitario pronto per essere incollato in CSS Tutto viene eseguito lato client - nulla di ciò che digiti viene caricato - che corrisponde al approccio privacy-first dietro ogni strumento del sito.
Se stai anche scegliendo colori o costruendo ombre per lo stesso componente, il Generatore di gradiente CSS e Generatore di ombre a scatola vivi a un clic di distanza, e il più ampio convertitore unità gestisce unità fisiche come lunghezza e peso quando il tuo lavoro si allontana dai CSS.
Domande frequenti
Come faccio a convertire PX in REM?
Dividere il valore del pixel per la dimensione del carattere radice. Al browser predefinito di 16px, REM = px ÷ 16, quindi 16px è 1rem, 24px è 1.5rem e 8px è 0.5rem. Immettere il valore dei pixel nel convertitore e l'equivalente REM viene visualizzato istantaneamente a qualsiasi dimensione del carattere di base impostata.
Come faccio a convertire REM in PX?
Moltiplicare il valore REM per la dimensione del carattere radice. A una base di 16 px, px = REM × 16, quindi 1REM è 16px, 1.5rem è 24px e 0,75REM è 12px. Modificare la dimensione del carattere di base nello strumento se il tuo elemento HTML utilizza un valore diverso.
Qual è la dimensione del carattere radice predefinita?
I browser impostano l'elemento html su 16px per impostazione predefinita, motivo per cui questo convertitore inizia da 16. poiché 1rem è sempre uguale alla dimensione del carattere root, tale impostazione predefinita rende 16px uguale esattamente a 1rem. Gli utenti possono modificare il proprio browser's dimensione del testo predefinita, che è uno dei motivi per cui rem è preferito per una tipografia accessibile e scalabile.
Qual è la differenza tra REM ed EM?
Un rem è sempre relativo alla dimensione del carattere html root, quindi rimane coerente in tutta la pagina Un em è relativo alla dimensione del carattere dell'elemento corrente, quindi può essere composto quando gli elementi nidificati impostano ciascuno la propria dimensione Imposta la dimensione del carattere di base nello strumento per modellare uno specifico contesto em.
Come si relazionano PX e PT in CSS?
CSS definisce un pollice come 96 pixel e 72 punti, quindi 1pt è uguale a 96/72 ≈ 1,333px, e 1px è uguale a 0,75pt I punti provengono dalla tipografia di stampa; sullo schermo sono un multiplo fisso del pixel di riferimento CSS Usa px o rem per il lavoro sullo schermo e prenota pt per i fogli di stile di stampa.
Cosa fa il trucco del 62,5% della dimensione del carattere?
L'impostazione della dimensione del carattere html al 62,5% rende la dimensione del carattere root 10px, quindi 1rem diventa un comodo 10px e la matematica rem si trasforma in spostamento del decimale - 1.6rem è 16px, 2.4rem è 24px Per modellarlo nel convertitore, imposta la dimensione del carattere di base su 10 e leggi la colonna rem.
Dovrei usare PX o REM per le dimensioni dei caratteri?
Rem è generalmente preferito per le dimensioni dei caratteri perché si adatta con la preferenza della dimensione dei caratteri del browser user's, che migliora l'accessibilità, mentre px fisso no. Molti team progettano in px e convertono in rem per il CSS finale I dettagli del layout come i bordi spesso rimangono in px.
Perché il valore convertito ha decimali lunghi a volte?
Alcune conversioni non sono esatte - 15px a una base 16px è 0,9375rem, e i valori pt spesso producono decimali ripetuti Lo strumento arrotonda a poche cifre decimali e taglia gli zeri finali per la leggibilità Per layout pixel-perfetti, arrotonda i valori rem a due o tre decimali o scegli una base che divide le tue dimensioni in modo pulito.
