בניית אתר שיתאים למחשב וסמארטפון

רוסא · 27/12/21

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

varchar · 27/12/21

אתר רספונסיבי אחד
הcss צריך להתאים לכל גודל מסך
לעיתים העיצוב מעט שונה במסך קטן
אבל בכל מקרה הטיפול הוא עיצובי בלבד
אפשר להשתמש בספריות bootstrap וכדו' - classes מוכנים שכבר מותאמים לכל גודל

רוסא · 27/12/21

השאלה היא אם אפשר לעצב שונה כל אתר
או שאני מוגבלת באפשרויות כי צריך להתאים לשני המכשירים

C · 27/12/21

נכתב ע"י רוסא:
השאלה היא אם אפשר לעצב שונה כל אתר
או שאני מוגבלת באפשרויות כי צריך להתאים לשני המכשירים

ברור שאפשר. כל הרעיון הוא שזה דורש יותר עבודה.

שירה 123 · 28/12/21

נכתב ע"י רוסא:
השאלה היא אם אפשר לעצב שונה כל אתר
או שאני מוגבלת באפשרויות כי צריך להתאים לשני המכשירים

media query

123tha · 28/12/21

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

CSS:

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

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