דלג לתוכן
🛠️
Whiz Tools

מרכז המרה מפיקסלים ל-REM ו-EM – מחשבון יחידות CSS חינמי

המר פיקסלים ליחידות REM ו-EM באופן מיידי. מרכז המרת יחידות CSS חינמי לעיצוב אתרים רספונסיבי. תומך בגדלי גופן מותאמים אישית וחישובים בזמן אמת לתוצאות מדויקות.

מרכז המרת יחידות PX, REM ו-EM

המר בין יחידות פיקסלים (PX), שורש אם (REM), ואם (EM). הזן ערך בכל שדה כדי לראות את הערכים השווים ביחידות אחרות.

px
px
px
rem
em
הדמיה אינה זמינה עבור ערכים שליליים או אפס

נוסחאות המרה

  • PX ל-REM: ערך בפיקסלים ÷ גודל גופן שורש
  • PX ל-EM: ערך בפיקסלים ÷ גודל גופן הורה
  • REM ל-PX: ערך ב-rem × גודל גופן שורש
  • EM ל-PX: ערך ב-em × גודל גופן הורה
מחשבון טעינה...
📚

תיעוד

ממיר יחידות px, rem ו-em

ממיר px ל-rem ול-em משנה אורך CSS בין פיקסלים (px), em של אלמנט השורש (rem) ו-em, באמצעות גודל גופן של אלמנט השורש וגודל גופן של אלמנט האב שהמשתמש מגדיר. שלוש היחידות הן הדרכים הנפוצות ביותר לקביעת גודל טקסט וריווח ב-CSS, השפה המשמשת לעיצוב דפי אינטרנט.

מה הם px, rem ו-em?

פיקסל (px) הוא יחידה קבועה. תיבה שהוגדר לה רוחב של 200px תישאר ברוחב 200px, בלי קשר לגודל הגופן שבו משתמש הדף.

rem ("em של אלמנט השורש") הוא יחידה שמותאמת לגודל הגופן של אלמנט השורש בדף, בדרך כלל תגית <html>. רוב הדפדפנים מגדירים את גודל גופן השורש ל-16px, אלא אם האתר משנה אותו. אם גודל גופן השורש הוא 16px, אז 1rem שווה ל-16px.

em היא יחידה שמותאמת לגודל הגופן של אלמנט האב, כלומר האלמנט שמכיל אותה. אם לאלמנט אב יש font-size: 20px, אז 1em בתוך אותו אב שווה ל-20px.

ההבדל העיקרי בין rem ל-em הוא נקודת הייחוס של כל אחת מהן. Rem מתייחסת תמיד לאלמנט השורש. Em מתייחסת לאלמנט האב הקרוב ביותר, ולכן הערך שלה יכול להשתנות בכל רמת קינון.

כיצד מחשבים המרה מ-px ל-rem

כדי להמיר פיקסלים ל-rem, מחלקים את ערך הפיקסלים בגודל גופן השורש:

r=pRr = \frac{p}{R}

כאשר r הוא האורך ב-rem, ‏p הוא האורך בפיקסלים ו-R הוא גודל גופן השורש בפיקסלים.

דוגמה פתורה

עם גודל גופן ברירת מחדל של 16px בשורש, 24px מומר ל:

24 ÷ 16 = 1.5rem

אם האתר מגדיר את גודל גופן השורש ל-10px (טריק נפוץ, שמבוצע באמצעות הגדרת html { font-size: 62.5%; }, מכיוון ש-62.5% מתוך 16px הם 10px), אותו ערך של 24px הופך ל:

24 ÷ 10 = 2.4rem

כיצד מחשבים המרה מ-rem ל-px

כדי לבצע את ההמרה בכיוון ההפוך, מכפילים את ערך ה-rem בגודל גופן השורש:

p=r×Rp = r \times R

כאשר p הוא האורך בפיקסלים, ‏r הוא האורך ב-rem ו-R הוא גודל גופן השורש.

עם שורש בגודל 16px, הערך 1.5rem מומר בחזרה ל-1.5 × 16 = 24px.

כיצד מחשבים המרה מ-px ל-em

כדי להמיר פיקסלים ל-em, מחלקים את ערך הפיקסלים בגודל הגופן של אלמנט האב:

e=pPe = \frac{p}{P}

כאשר e הוא האורך ב-em ו-P הוא גודל הגופן של אלמנט האב בפיקסלים.

דוגמה פתורה

אם גודל הגופן של אלמנט האב הוא 20px, אז 24px מומר ל:

24 ÷ 20 = 1.2em

כיצד מחשבים המרה מ-em ל-px

מכפילים את ערך ה-em בגודל הגופן של אלמנט האב:

p=e×Pp = e \times P

כאשר p הוא האורך בפיקסלים, ‏e הוא האורך ב-em ו-P הוא גודל הגופן של האב.

עם אב בגודל 20px, הערך 1.2em מומר בחזרה ל-1.2 × 20 = 24px.

כיצד מחשבים המרה מ-rem ל-em ומ-em ל-rem

מכיוון ש-rem ו-em נמדדות ביחס לגדלי גופן שונים, ההמרה ביניהן דורשת הן את גודל גופן השורש והן את גודל גופן האב:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

כאשר R הוא גודל גופן השורש ו-P הוא גודל גופן האב.

דוגמה פתורה

עם גודל גופן שורש של 16px וגודל גופן אב של 20px, הערך 2rem מומר ל:

2 × (16 ÷ 20) = 1.6em

אם גדלי גופן השורש והאב שווים, 1rem תמיד שווה ל-1em.

מתי כל יחידה שימושית

פיקסלים מתאימים לפרטים שגודלם לא אמור להשתנות, כגון מסגרת בגודל 1px או סמל ברוחב קבוע.

Rem נפוצה לריווח ולטיפוגרפיה שאמורים להישאר עקביים לאורך הדף. מכיוון שהיא מתייחסת תמיד לגודל גופן השורש, ערך rem אינו משתנה, בלי קשר לעומק הקינון של האלמנט. משמעות הדבר היא גם שפריסות המבוססות על rem מתאימות את עצמן אוטומטית כאשר המשתמש מגדיל את גודל הגופן כברירת מחדל בדפדפן, דבר המסייע לקוראים עם ראייה ירודה.

Em מתאימה לשימוש בתוך רכיב יחיד ועצמאי, כגון כפתור, שבו הריפוד צריך להשתנות יחד עם גודל הגופן של הכפתור עצמו. בעיה נפוצה ב-em היא הצטברות: אם כמה אלמנטים מקוננים משתמשים כל אחד ב-font-size: 1.2em, כל רמה מכפילה את הרמה שלפניה, ולכן גדלי הגופן גדלים מהר יותר מהמתוכנן.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

לאחר שלוש רמות, הטקסט גדל בכ-73%, ולא ב-20% שמפתח עשוי לצפות לו מכלל יחיד של 1.2em.

שימוש בממיר

  1. הזינו ערך בשדה הפיקסלים, ה-rem או ה-em.
  2. שני השדות האחרים מתעדכנים אוטומטית, בעיגול לארבע ספרות אחרי הנקודה העשרונית.
  3. הגדירו את גודל גופן השורש כך שיתאים לאלמנט <html> של הפרויקט. ברוב הדפדפנים ערך ברירת המחדל הוא 16px, והוא משפיע רק על rem.
  4. הגדירו את גודל גופן האב כך שיתאים לגודל הגופן של האלמנט שבתוכו יופיע ערך em. הוא משפיע רק על em.
  5. השתמשו בכפתור ההעתקה שליד שדה כדי להעתיק את הערך שלו.

שני שדות גודל הגופן מקבלים מספר שלם של פיקסלים, והערך הקטן ביותר המותר הוא 1px. כפתור האיפוס מוחק את הערך ומחזיר את שני גדלי הגופן ל-16px.

מתחת לשדות הכלי מצייר פס אחד לכל יחידה. כל שלושת הפסים מייצגים את אותו אורך פיזי, ולכן רוחבם זהה; כך מתקבלת בדיקה מהירה לכך שה ההמרה נכונה. פס מצויר באורך הפיקסלים האמיתי שלו עד 300px; כל ערך ארוך יותר מוקטן כדי להתאים, ולכן ערך של 600px וערך של 900px מסתיימים שניהם ב-300px. הפסים מופיעים רק כאשר ערך הפיקסלים גדול מאפס.

שאלות נפוצות

מה ההבדל בין rem ל-em? Rem מתייחסת תמיד לגודל הגופן של אלמנט השורש. Em מתייחסת לגודל הגופן של אלמנט האב הקרוב ביותר. ערך rem נשאר זהה בכל מקום בדף; ערך em יכול להשתנות בהתאם לעומק הקינון של האלמנט.

מדוע דפדפנים משתמשים ב-16px כגודל גופן ברירת המחדל? 16px הוא כבר זמן רב גודל הטקסט המוגדר כברירת מחדל בדפדפנים מרכזיים, מכיוון שנוח לקרוא אותו במסכים טיפוסיים ללא עיצוב נוסף. הנחיות הנגישות באינטרנט ממליצות לאפשר הגדלה של טקסט עד 200% בלי לפגוע בפריסת הדף, ו-16px הוא נקודת התחלה מעשית לכך.

מהו הטריק של 62.5%? הגדרת html { font-size: 62.5%; } הופכת את גודל גופן השורש המוגדר כברירת מחדל, 16px, ל-10px, מכיוון ש-62.5% מתוך 16 הם 10. כך חישובי rem פשוטים יותר, מכיוון ש-1.6rem שווה ל-16px ו-2.4rem שווה ל-24px.

האם ערכי px, rem ו-em יכולים להיות שליליים? כן, עבור מאפיינים שמקבלים אורכים שליליים, כגון שוליים או טרנספורמציות של CSS. ריפוד אינו יכול להיות שלילי ב-CSS; דפדפנים מתעלמים מערך ריפוד שלילי. הממיר מטפל בערכים שליליים, אך אינו מצייר עבורם פסים, מכיוון שלפס אין רוחב שלילי.

האם צריך להמיר כל ערך פיקסלים ל-rem? לא בהכרח. מסגרות ופרטים עדינים אחרים נשארים בדרך כלל בפיקסלים, מכיוון שלרוב אין צורך שיותאמו לגודל הגופן והם עלולים להיראות לא אחידים ברוחבים של חלקיקי פיקסל. Rem מתאימה לריווח ולטיפוגרפיה שאמורים להשתנות בהתאם להעדפת גודל הגופן של המשתמש.

האם בחירת היחידה משפיעה על ביצועי הדף? לא. דפדפנים ממירים כל אורך CSS לאותו ערך פנימי במהלך הפריסה, ולכן px, rem ו-em מוצגות באותה מהירות. הבחירה ביניהן משפיעה על התחזוקה ועל הנגישות, לא על המהירות.