ממיר יחידות CSS

ממיר יחידות CSS - מחשבון px, rem, em, %

🎨 המרה בין יחידות CSS: פיקסלים (px), rem, em, אחוזים (%), נקודות (pt) ויחידות viewport (vw, vh). כלי חיוני לעיצוב ופיתוח ווב רספונסיבי.

סוגי יחידות CSS

• יחידות מוחלטות: px, pt, cm, mm, in - גודל קבוע ללא קשר להקשר
• יחידות יחסיות: rem, em, %, vw, vh - מתבססות על ההורה או ה-viewport
• יחסיות לפונט: rem, em, ch, ex - לפי גודל הפונט
• יחסיות ל-viewport: vw, vh, vmin, vmax - לפי ממדי ה-viewport

הסברים על יחידות

• px (פיקסלים): 1px = פיקסל אחד של המכשיר. יחידה מוחלטת, מדויקת אך לא תמיד סקיילבילית.
• rem: יחסי לאלמנט השורש (html). ברירת מחדל: 1rem = 16px.
• em: יחסי לגודל הפונט של ההורה. יכול “להצטבר” באלמנטים מקוננים.
• %: יחסי לתכונה של ההורה. 100% = כמו ההורה.
• pt (נקודות): יחידת הדפסה. 1pt = 1/72 אינץ' ≈ 1.333px.
• vw: 1vw = 1% מרוחב ה-viewport. 100vw = רוחב מלא.
• vh: 1vh = 1% מגובה ה-viewport. 100vh = גובה מלא.

המרות נפוצות

• 1rem = 16px (ברירת מחדל של הדפדפן)
• 1em = 16px (אם ההורה הוא 16px)
• 100% = גודל אלמנט ההורה
• 12pt = 16px (נפוץ בהדפסה)
• 1vw = 19.2px (ב-viewport של 1920px)

שיטת 62.5%

הגדירו html { font-size: 62.5%; } כדי ש-1rem = 10px. זה מפשט חישובים: 1.6rem = 16px, 2.4rem = 24px וכו'.

שיקולי נגישות

• השתמשו ב-rem לפונטים: מכבד את העדפות גודל הפונט של המשתמש
• הימנעו מ-px לפונטים: לא מסתגל להגדרות המשתמש
• השתמשו ביחידות יחסיות: הופך עיצוב לנגיש יותר לזום/הגדלה
• בדקו גדלים שונים: בדיקה ב-200% זום ובהגדרות טקסט גדול

עיצוב רספונסיבי

השתמשו ב-rem ב-media queries: @media (min-width: 48rem) במקום 768px. כך נקודות השבירה מסתגלות להעדפות גודל הפונט של המשתמש.

💡 טיפ פרו: מומלץ להשתמש ב-rem לרוב המידות (פונטים, ריווח, breakpoints), ב-px לגבולות ופרטים קטנים, וב-% או יחידות viewport לפריסות. הימנעו מ-em לריווח כי הוא עלול להצטבר בצורה לא צפויה.