Pixeli în rem
Convertiți valorile pixelilor în rem pentru layout-uri CSS moderne. rem se scalează cu dimensiunea fontului rădăcină a utilizatorului - mai bine pentru accesibilitate decât px fix. Rădăcina implicită a browserului este adesea de 16 px, deci 24 px = 1,5 rem, cu excepția cazului în care proiectul înlocuiește html { font-size }.
Pixeli
Mărimea fontului root (px)
Rezultat
1rem
Cum se transformă px în rem
1. Introdu valoarea pixelilor din designul tău (de exemplu, 32 px).
2. Setați dimensiunea fontului rădăcină (implicit 16 px dacă nu se modifică).
3. Copiază rezultatul rem în foaia de stil.
4. Folosește rem pentru dimensiunile fontului, spațierea și scara componentelor; px pentru marginile firului de păr dacă este necesar.
Exemple Px to rem
Corp și tip de titlu
16 px = 1 rem (implicit). 24 px = 1,5 rem titlu. 14 px = 0,875 rem text mic.
Rădăcină personalizată 10 px (sisteme de proiectare)
Unele echipe setează html { font-size: 62.5% } deci 1 rem = 10 px. Apoi 32 px design token = 3,2 rem.
Scala de spațiere
Grilă de 8 px → 0,5 rem la rădăcină de 16 px. 16 px padding = 1 rem; ritm consistent în scale asemănătoare vântului de coadă.
Când să convertiți px în rem
• Când implementați specificațiile Figma în CSS receptiv cu zoom accesibil.
• Când vă aliniați cu jetoanele sistemului de proiectare definite în rem.
• Când utilizatorii înlocuiesc dimensiunea implicită a fontului din browser - aspectul rem se adaptează.
Când să alegi altceva
• Când ai nevoie de em în raport cu un font component imbricat - folosești pixeli pentru a le.
• Când ai nevoie de unități de vizualizare (vw/vh) pentru aspecte pe ecran complet.
• Când potriviți pixelii dispozitivului 1:1 pe marginile retinei — marginile de 1 px rămân adesea în px.
rem vs em în componenta CSS
em se combină în interiorul elementelor imbricate cu diferite dimensiuni de font - umplutura în em crește odată cu textul local. rem rămâne legat de rădăcină, oferind o distanță previzibilă între componente. Multe echipe folosesc rem pentru scara aspectului și em numai pentru spațierea dintre litere sau micro-ajustări legate de tipul local.
Flux de lucru de transfer de proiectare
Designerii exportă px din Figma; dezvoltatorii se împart după rădăcină agreată (document în README). Când proiectul folosește 62,5% truc, confirmați înainte de conversie - amestecarea ipotezelor dublează sau înjumătățește interfața de utilizare.
Întrebări frecvente
Ce este rem?
rem = „rădăcină em”. 1 rem este egal cu dimensiunea fontului elementului html, nu a părintelui.
De ce să nu folosești px peste tot?
px fix ignoră preferințele de font ale utilizatorului. rem respectă scalarea rădăcină pentru accesibilitate (WCAG).
Dimensiunea implicită a fontului rădăcină?
Majoritatea browserelor implicit la 16 px pe html. Utilizatorii pot schimba acest lucru în setări.
Formula?
rem = px ÷ rootFontSizePx. Exemplu: 20 px ÷ 16 = 1,25 rem.
Rem funcționează pentru margini și umplutură?
Da — rem se aplică oricărei proprietăți de lungime CSS, nu numai dimensiunea fontului.
Se încarcă datele?
Nu. Conversia funcționează local.