התוצאות מוצגות לצורכי מידע בלבד ועשויות להכיל שגיאות. מומלץ לאמת מידע חשוב באופן עצמאי. השימוש בכלי הוא באחריותכם בלבד.
מה הכלי עושה
ממיר יחידות ה־CSS ממיר אורך בין px, rem, em, pt ו־%. הזינו ערך, בחרו את היחידה שלו וקבעו בשדה בסיס את גודל הגופן הבסיסי (ברירת המחדל היא 16px, הגודל שדפדפנים משתמשים בו אלא אם המשתמש שינה אותו), והדף יציג את אותו אורך בכל חמש היחידות.
ההמרות פועלות לפי מפרט CSS: 1rem שווה לגודל הגופן של השורש, כך שעם בסיס של 16px, 1.5rem הוא 24px. נקודה (point) היא 1/72 אינץ' ופיקסל CSS הוא 1/96 אינץ', ולכן 12pt הם 16px. כאן em ו־% מחושבים מול אותו בסיס, וזה מתאים לגודל גופן שמוגדר על אלמנט שההורה שלו משתמש בגודל השורש. שום דבר לא יוצא מהדפדפן שלכם.
מתי להשתמש בו
- להמיר ערכי פיקסלים מהדמיית עיצוב ל־
rem, כדי שהטקסט יגדל ויקטן לפי הגדרות הגופן של המשתמש. - להמיר גיליון סגנונות להדפסה או עיצוב PDF שמוגדרים בנקודות.
- לבדוק לאיזה גודל מתורגם גודל גופן ב־
%כשיורשים CSS שמישהו אחר כתב. - לבנות סולם טיפוגרפי שבו כל מדרגה צריכה ערך
remנקי.
דוגמה
קלט
24px, בסיס 16pxפלט
px 24.000
rem 1.5000
em 1.5000
pt 18.000
% 150.00%שאלות על הכלי
כדאי להשתמש ב־rem או ב־px לגודלי גופן?
השתמשו ב־rem לגודלי גופן ולרוב המרווחים. כשמישהו מגדיל את גודל הגופן ברירת המחדל בדפדפן כדי לקרוא בנוחות, ערכי rem גדלים יחד איתו, בעוד שערכי px נשארים קבועים.
מה ההבדל בין rem ל־em?
rem תמיד יחסי לגודל הגופן של השורש (html). em יחסי לגודל הגופן של האלמנט הנוכחי, ולכן באלמנטים מקוננים הערכים מוכפלים: 1.2em בתוך 1.2em הוא פי 1.44 מהבסיס. הממיר מחשב את שתיהן מול הבסיס שהזנתם.
למה 1pt לא שווה 1px?
CSS קובע שאינץ' אחד הוא 96 פיקסלים, ונקודה היא 1/72 אינץ', ולכן 1pt הוא 1.333px. מכאן שטקסט בגודל 12 נקודות במעבד תמלילים זהה בגודלו ל־16px באינטרנט.
איזה גודל בסיס להזין?
הזינו 16, אלא אם גיליון הסגנונות שלכם קובע גודל שורש אחר, כמו html { font-size: 62.5%; }, שהופך את הבסיס ל־10px. הזינו את הגודל שאליו מתורגם בפועל האלמנט html.
האם הכלי חינמי?
כן, השימוש חינמי. בלי הרשמה ובלי אימייל. התוצאה מופיעה בדף הזה.
איך מקבלים את התוצאה?
משתמשים בכלי בדף הזה. התוצאה מופיעה כאן, בלי צורך במשלוח לאימייל.