Pixelből REM
Konvertálja a pixelértékeket rem-re a modern CSS-elrendezésekhez. rem méretezhető a felhasználó gyökér betűméretével — jobb a hozzáférhetőség szempontjából, mint a rögzített px. Az alapértelmezett böngészőgyökér gyakran 16 px, tehát 24 px = 1,5 rem, hacsak a projekt nem írja felül a html { font-size } értéket.
Pixel
Gyökér betűméret (px)
Eredmény
1rem
Hogyan lehet a px-t rem-re konvertálni
1. Add meg a tervből származó pixelértéket (pl. 32 px).
2. Állítsd be a gyökér betűméretet (alapértelmezett 16 px, ha változatlan).
3. Másold a rem eredményt a stíluslapjába.
4. A rem használata a betűméretekhez, a térközhöz és a komponens léptékéhez; px a hajvonal szegélyéhez, ha szükséges.
Px to rem példák
Törzs és címsor típusa
16 px = 1 rem (alapértelmezett). 24 px = 1,5 rem fejléc. 14 px = 0,875 rem kis szöveg.
Egyéni gyökér 10 képpont (tervezési rendszerek)
Egyes csapatok a html { font-size: 62.5% } beállítást, tehát 1 rem = 10 px. Ezután 32 képpontos tervezési token = 3,2 rem.
Térköz léptéke
8 képpontos rács → 0,5 rem 16 px gyökérnél. 16 px kitöltés = 1 rem; következetes ritmus Tailwind-szerű skálákban.
Mikor használd ezt az eszközt
• Ha a Figma specifikációit adaptív CSS-ben valósítja meg hozzáférhető nagyítással.
• Amikor igazodik a rem-ben meghatározott tervezési rendszertokenekhez.
• Amikor a felhasználók felülbírálják a böngésző alapértelmezett betűméretét — rem elrendezés.
Mikor válassz mást
• Ha egy beágyazott komponens betűtípushoz képest szüksége van rá — használjon pixeleket.
• Ha nézetablak egységekre van szüksége (vw/vh) a teljes képernyős elrendezéshez.
• Ha 1:1 arányban marad a retina border pixel px.
rem vs em a CSS-komponensben
em összetettek a beágyazott elemeken belül különböző betűmérettel — az em-ben lévő kitöltés a helyi szöveggel együtt nő. A rem a gyökérhez kötve marad, így kiszámítható távolságot biztosít az összetevők között. Sok csapat a rem-et használd az elrendezési léptékekhez, és az em-et csak a betűközhöz vagy a helyi típushoz kötött mikrobeállításokhoz.
Az átadás-átvételi munkafolyamat megtervezése
A tervezők a Figmából exportálják a px-t; a fejlesztők megegyezett gyökérrel osztanak fel (dokumentum a README-ben). Ha a projekt 62,5%-os trükköt használ, erősítse meg a konvertálás előtt — a keverési feltételezések megduplázzák vagy felére csökkentik a felhasználói felületet.
Gyakori kérdések
Mi az a rem?
rem = "em gyökér". Az 1 rem a html elem betűméretével egyenlő, nem a szülőé.
Miért ne használnánk a px-et mindenhol?
A rögzített px figyelmen kívül hagyja a felhasználó betűtípus-beállításait. A rem tiszteletben tartja a root skálázást az akadálymentesítés érdekében (WCAG).
Alapértelmezett gyökér betűméret?
A legtöbb böngésző alapértelmezett értéke 16 px a html-en. A felhasználók ezt a beállításokban módosíthatják.
Képlet?
rem = px ÷ rootFontSizePx. Példa: 20 px ÷ 16 = 1,25 rem.
Működik a rem a margókhoz és a kitöltéshez?
Igen — a rem minden CSS-hossz tulajdonságra vonatkozik, nem csak a betűméretre.
Fel vannak töltve adatok?
Nem. A konvertálás helyben fut.