מה זה ממיר יחידות CSS?
CSS תומך בכמה יחידות שונות לגודל — יחידות מוחלטות כמו px ו-pt, ויחידות יחסיות כמו rem, em, vw, vh ו-%. יחידות יחסיות חיוניות לעיצוב רספונסיבי ונגיש (rem במיוחד מכבד את העדפת גודל הגופן של המשתמש בדפדפן), אבל ההמרה ביניהן בראש היא באמת קשה, כיוון שהתוצאה תלויה בהקשר: גודל גופן השורש, גודל הגופן של האלמנט הנוכחי, או מימדי חלון התצוגה.
הממיר הזה עושה עבורכם את החישוב: הגדירו את גודל גופן הבסיס, את מימדי חלון התצוגה ואת הערך שממנו אתם ממירים, וראו מיידית את הערך השקול בכל יחידה אחרת — שימושי לתרגום מדידות הפיקסלים של אבטיפוס עיצובי לערכי rem/vw רספונסיביים, או לבדיקה כפולה של מה כלל CSS קיים מציג בפועל על המסך.
מתי להשתמש במחשבון זה
- כאשר מתרגמים מפרט מבוסס-פיקסלים של מעצב לערכי rem או vw רספונסיביים עבור CSS
- כאשר בודקים מה גודל גופן רספונסיבי מבוסס-vw מציג בפועל ברוחב מסך מסוים
- כאשר ממירים CSS מודפס או דואר אלקטרוני מדור ישן מבוסס-pt ל-px או rem סטנדרטיים לרשת
- כאשר בוחנים האם סולם המרווחים של מערכת עיצוב מסתדר באופן נקי בין יחידות שונות
- כאשר בודקים שפיות של ערך CSS בזמן סקירת קוד בלי לפתוח כלי פיתוח של הדפדפן
- כאשר בונים אתרים נגישים שזקוקים לגודל מבוסס-rem כדי לכבד את העדפות הגופן של המשתמש
שלבים:
- הזינו את הערך שברצונכם להמיר ובחרו את יחידת המוצא שלו.
- הגדירו את גודל גופן הבסיס (ברירת המחדל היא תקן הדפדפן של 16px).
- עבור המרות vw/vh, הזינו את רוחב וגובה חלון התצוגה המבוקשים.
- קראו את הערך השקול בכל יחידה אחרת מיידית.
נוסחה
1rem = 1em = גודל גופן בסיס (16px כברירת מחדל)
1pt = 96/72 px ≈ 1.333px
1vw = רוחב חלון תצוגה / 100
1vh = גובה חלון תצוגה / 100
1% = ערך ייחוס / 100
מקרי שימוש
- המרת מפרט מבוסס-פיקסלים של מעצב (Figma/Sketch) לערכי rem עבור CSS נגיש
- בדיקת מה גודל גופן רספונסיבי מבוסס-vw מציג בפועל ברוחב מסך מסוים
- תרגום CSS מודפס או דואר אלקטרוני מדור ישן מבוסס-pt ל-px או rem סטנדרטיים לרשת
- בחינה האם סולם המרווחים של מערכת עיצוב מסתדר באופן נקי בין יחידות
- בדיקת שפיות מהירה של ערך CSS בזמן סקירת קוד בלי לפתוח כלי פיתוח
יתרונות מרכזיים
- ממיר בין כל 7 יחידות ה-CSS הנפוצות במקום אחד
- משתמש בגודל גופן הבסיס ובחלון התצוגה בפועל שלכם, לא בהנחה קבועה
- תוצאות מיידיות תוך כדי הקלדה — אין צורך לפתוח כלי פיתוח של הדפדפן
- חינם, ללא הרשמה, רץ כולו בדפדפן שלכם
טיפים מקצועיים
- העדיפו rem על פני em עבור גדלי גופנים כדי להימנע מהצטברות בלתי צפויה ברכיבים מקוננים
- השתמשו ב-dvh/svh במקום vh עבור פריסות מסך מלא בנייד אם הדפדפנים המבוקשים תומכים בכך
- שמרו על גודל גופן בסיס עקבי בכל מערכת העיצוב שלכם כך שהמרות rem יישארו צפויות
- בעת תרגום עיצוב מושלם בפיקסלים, המירו את המרווחים ל-rem אבל השאירו רוחבי גבולות ופרטים עדינים אחרים ב-px
טעויות נפוצות שיש להימנע מהן
- הנחה ש-1rem תמיד שווה ל-16px, בלי לבדוק אם גודל גופן השורש שונה
- שימוש ב-vh לפריסות בגובה מלא בנייד בלי להתחשב בהתנהגות סרגל הכתובות של הדפדפן
- קינון גדלי גופנים מבוססי-em והפתעה כשהם מצטברים באופן בלתי צפוי
- ערבוב לא עקבי של px ו-rem באותו רכיב, ושבירת קנה המידה לנגישות
מונחי מפתח מוסברים
- גודל גופן שורש: ה-font-size המוגדר על אלמנט ה-html, שאליו כל יחידות ה-rem יחסיות
- חלון תצוגה (Viewport): האזור הנראה של דף אינטרנט בחלון הדפדפן
- יחידה מוחלטת: יחידה כמו px או pt עם גודל קבוע בעולם האמיתי, שאינה יחסית לשום הקשר
- יחידה יחסית: יחידה כמו rem, em, vw או % שגודלה תלוי בערך אחר
מושגים קשורים
- Color ממיר: המרה בין פורמטי צבע HEX, RGB ו-HSL
- Length ממיר: המרה בין אינצ'ים, סנטימטרים, פיקסלים ועוד
- Unit ממיר: המרה בין יחידות מידה שונות
- מחשבון יחס גובה/רוחב: חשב and convert aspect ratios
- Data ממיר: המרה בין בתים, KB, MB, GB ו-TB
דוגמה
בגודל גופן בסיס של 16px, 1.5rem מומר ל-24px. ברוחב חלון תצוגה של 1440px, 5vw מומר ל-72px.
פירוש התוצאות שלכם
הממיר מקבל ערך ביחידת CSS אחת ומציג ערכים שקולים בכל היחידות האחרות. המשתנה המרכזי הוא גודל גופן הבסיס שלכם (16px כברירת מחדל), שקובע את היחס בין rem ל-px. כיוון ש-rem יחסי לגודל הגופן של אלמנט השורש html, שינוי של ערך הבסיס יזיז את כל הערכים השקולים ב-rem באופן יחסי.
עבור יחידות רספונסיביות (vw, vh), הזינו את מימדי חלון התצוגה המבוקשים כדי לראות כיצד הערכים מתורגמים בגדלי מסך מסוימים. זה שימושי במיוחד כדי להבין האם כותרת של 5vw תהיה קריאה במסך נייד של 320px (16px) לעומת מסך שולחני של 1440px (72px). הממיר עוזר לכם לקבל החלטות מושכלות לגבי איזו יחידה להשתמש בכל הקשר.