Studio Editor: איך לפתור הבדלים בין ה-Editor לאתר הפעיל

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

ההבדלים האלה נגרמים בדרך כלל מהגדרות אלמנטים מסוימות (שינוי גודל, מיקום והתנהגויות) באזורי תצוגה שונים. מדריך זה מציע פתרונות אפשריים ועוזר לשמור על אחידות במסכים בגדלים שונים.

אם האתר הפעיל נראה שונה ממה שאתם רואים ב-editor, יכול להיות שזה קשור לנקודות ברייקפוינט ולגודל העריכה.

נקודות ברייקפוינט הן טווחי גודל מסך שמשמשים לעיצוב אתר למכשירים שונים (כלומר אזורי תצוגה). אתם יכולים להגדיר גודל עריכה ספציפי בטווח הזה – לדוגמה, בנקודת הברייקפוינט של 320‏-750 פיקסלים, תוכלו להגדיר את גודל מסך העריכה ל-500 פיקסלים.

אזורי תצוגה שנופלים מחוץ לטווחים המוגדרים לא עוברים אופטימיזציה, וייתכנו בעיות ביישור ובפריסה. אם אתם מבחינים בבעיה באזור תצוגה ספציפי, מומלץ להגדיר את גודל העריכה כך שיתאים לה ולבצע התאמות.

אם השתמשתם ביחידות שוליים שונות באלמנטים-אחים (אלמנטים עם אותו מקטע הורה / קונטיינר), ייתכן שהדבר פוגע ביישור התוכן או מעוות אותו. מומלץ להשתמש באותן יחידות שוליים (%,‏ px,‏ px*‎ וכו') עבור כל האלמנטים האחים בקונטיינר מסוים או מקטע מסוים.

אלמנטים של הורים וצאצאים עם התנהגויות רספונסיביות סותרות עלולים לגרום לבעיות בתוכן שבאתר הפעיל.

לדוגמה, אפשר לחשוב על כפתור שמחובר לקונטיינר. ההתנהגות הרספונסיבית של הכפתור היא Fixed (קבוע), והקונטיינר מוגדר למצב Scale proportionally (שינוי פרופורציונלי). מכיוון שהכפתור קבוע, הוא לא ישתנה ביחס לקונטיינר ההורה שלו, מה שעלול להוביל לרווחים, לחפיפה של אלמנטים ולחיתוך אלמנטים באתר. זה עלול לקרות גם כשלאחד מהאלמנטים יש התנהגות רספונסיבית Mixed (מעורבת).

כדי לפתור את הבעיה הזאת, מומלץ לערוך את ההתנהגויות הרספונסיביות של האלמנטים.

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