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.
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ă.
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.
Î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.