מבוא לעיצוב רספונסיבי - עזרה של Webflow

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

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

ישנם שלושה היבטים שונים לעיצוב רספונסיבי שנכסה כאן:

1. זרימת תוכן
2. גודל קבוע
3. גודל יחסי
4. נקודות שבירה (שאילתות מדיה)

זרימת תוכן

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

גודל קבוע

גודל יחסי

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

נקודות שבירה

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

למד עוד:

• סקירה על נקודות שבירה
• עיצוב לתצוגות גדולות יותר

חזרה לעזרה של webflow