🧮 למה כל כך הרבה יחידות?
אתם ב-Webflow, מתאמים טיפוגרפיה ופריסות.
פתאום אתם שמים לב שלכל אפשרות גודל יש 10 סוגים שונים:
אם אתם כמוני, הרגשתם המומים.
- מה האפשרויות האלה אומרות?
- האם אני משתמש בסוג הנכון כאן?
- האם אני באמת צריך את כל אלה? (ספוילר: לא. אתם צריכים רק 4).
כל יחידה משנה את גודל האלמנט בצורה שונה. בחירה בלא-נכונה תפגע במראה ובביצועים של האתר שלכם.
לדוגמה, שימוש ב-PX במקום REM לטקסט זו שגיאה גדולה כי זה יהרוס את ריספונסיביות האתר שלכם (שימוש ב-PX לטקסט נועל גדלי גופנים, מה שמקשה על שינוי קנה המידה לסקרינים שונים וצרכי נגישות. REM שומר על הטקסט גמיש ורספונסיבי).
עשיתי את המחקר שלי ומצאתי את ארבע אפשרויות הגודל היחידות שאני צריך להשתמש בהן ב-95% מהמקרים.
🛠 4 היחידות היחידות שאתם באמת צריכים
1. PX (פיקסלים) - קבוע ומדויק
יחידה זו מייצגת כמה פיקסלים האלמנט יתפוס על המסך.
👍🏽 מתאים ל: אלמנטי UI קטנים (כפתורים, אייקונים, גבולות)
🤔 למה? לא מתרחב, תמיד נשאר באותו גודל
2. REM (Root EM) - התקן הגמיש
👍🏽 מתאים ל: טקסט (כותרות, פסקאות), ריווח (מרווחים, ריפוד).
🤔 למה? מתרחב עם גודל הגופן הבסיסי של האתר
3. % (אחוז) - נזיל וגמיש
👍🏽 מתאים ל: קונטיינרים, divs, פריטי גריד
🤔 למה? מתרחב בהתאם לאלמנט האב
טיפ מקצועי: 100% הופך אלמנט לרחב כמו האב שלו, מצוין לפריסות רספונסיביות!
4. VW ו-VH (רוחב Viewport וגובה Viewport) - קסם מסך מלא
👍🏽 מתאים ל: קטעי Hero, רקעים בגודל מסך מלא, טיפוגרפיה נזילה
🤔 למה? מתאים לגודל המסך אוטומטית
📋 גיליון עזר מהיר
🚀 שמרו על פשטות
- אתם לא צריכים את כל היחידות ש-Webflow מציעה, רק דבקו בPX, REM, % ו-VW/VH.
- REM לטקסט
- % לפריסות
- VW/VH לאלמנטים במסך מלא
- PX לפרטים מדויקים.
עכשיו, תוכלו לבזבז פחות זמן בניחושים ויותר זמן בבניית אתרי Webflow מדהימים!
🔹 רוצים עוד טיפים על Webflow? ענו ספרו לי מה מבלבל אתכם, ואולי אכסה את זה בגיליון הבא!