היום נלמד איך לסדר את האיזורים ואת העמודות באתר על פי הסדר שאנחנו רוצים לפי גודל המסך
ללא יצירת איזורים כפולים וללא הסתרת איזורים במסכים השונים !
למשל: אם בשולחני הלוגו בצד שמאל והתפריט מצד ימין
ובנייד אנחנו רוצים שהלוגו יהיה מימין והתפריט יהיה משמאל
אז בואו נתחיל ונסביר הכל בהמשך
סידור עמודות ואיזורים על ידי CSS - המדריך המלא
(מבוא לעיצוב אתרים רספונסיביים)
קודם כל בואו נתחיל בוידאו קצר ולעניין שמסביר את כל התהליך ואז נמשיך:
לינק ליוטיוב
ראיתם את הוידאו? מצוין !
עכשיו ניתן קצת הסבר כתוב להכל ולבסוף נוסיף את כלה קודים הנצרכים לביצוע התהליך, אז ככה,
כבונה אתרים ובעיקר כמשפר מהירות לאתרים וחנויות אינטרנטיות (ווקמורס) נתקלתי לא מעט פעמים במבנים לקויים שהיתי צריך לסדר כדי לשפר ביצועים.
תבינו שרק על ידי סידור מבנה לקוי אפשר לשפר מהירות אז כמובן שזה גם ברוב המקרים הדבר שנתחיל איתו, שזה סידור מבנה האתר.
יש המון מדריכי HTML ו CSS וקורסים ברשת ועדיין לא מצאתי מדריך מלא לשימוש בתכונת (נכס) ORDER ב CSS כמו שאנחנו כותבים פה היום בשבילכם !
בעצם לדעתי זה מהלך וכלל שהוא חובה לבוני אתרים ובמיוחד לעיצוב אתרים רספונסיביים ללא שכפול איזורים והסתרת איזורים
שגורמת לריבוי קוד מיותר והגדלת זמני טעינה של האתר שלנו.
כשאנו בונים אתרי אינטרנט עריכת תוכן ופריסת העמוד מאוד חשובה לחוויית המשתמש
ובשביל להשתמש בתכונה שאנחנו מציגים פה היום בכלל לא צריך ידע והבנת המושגים של CSS כמו:
LAYOUT / CSS GRID / CSS FLEX / GRID TEMPLATE COLUMN / מרווח בין תמונות HTML / מושג BOOSTSTARP ועוד …
אלא פשוט לעקוב אחרי ההוראות, עשינו את זה בשבילכם הכי פשוט שאפשר ואין יותר קל מזה, אז יאללה בלי הרבה דיבורים !
שלב 1 – CSS CODE – קוד CSS להטמעה
במידה ואנחנו עובדים אם אתר אלמנטור אנחנו נסמן את האלמנט שנרצה לשלוט עליו, נלחץ עליו,
ואז יש לנו אופציה ב "אפשרויות –> מתקדם" אם נירד הכי למטה אנחנו נראה תיבת "CSS מותאם"(CUSTOM CSS)
נכניס את הקוד הבא:
@media only screen and (max-width:1024px){
selector{
order:1;
}
}
והקוד אומר ככה:
האלמנט שסימנו, אז המיקום שלו בגודל מסך שהוא עד (ומקסימום) ל 1024px שזה רוחב מסך טאבלט
(בעצם כל גודל מסך שהוא ממתחת למסך מחשב שולחני/נייד) המיקום שלו יהיה 1 זה למשל עם הלוגו בשולחני לא אלמנט ראשון ונרצה שבנייד הוא כן.
ככה אנחנו עוברים על כל האלמנטים בעמודה ונותנים להם מספור לפי הצורך 1,2,3,4 וכן הלאה …
כדי לשנות את הקוד שישלוט רק על מובייל (טלפון נייד) ולא יכלול את הטאבלט אנו נשנה את הקוד ל :
@media only screen and (max-width:767px){
selector{
order:1;
}
}
בואו לראות ולהתרשם מאתרים שבניתי
חניתה דוגס בע"מ
