מאמר זה מדגים את השלבים ליצירת עיצוב אתר רספונסיבי ב-HTML ו-CSS באמצעות:
כיצד ליצור עיצוב אתר רספונסיבי עם HTML ו-CSS?
יצירת עיצוב אתר רספונסיבי עם HTML ו-CSS כרוכה בבניית פריסה המתאימה לגדלים ורזולוציות מסך שונות. להלן השלבים שתוכל לבצע כדי ליצור עיצוב אתר רספונסיבי:
שלב 1: Viewport Meta Tag
ה ' נקודת מבט 'מטא תג ממלא תפקיד חיוני ביצירת עיצוב אתרים רספונסיבי. הוא מוכנס בתוך ' ' תג של קובץ ה-HTML המכיל את התכונות הבאות:
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width,initial-scale=1' / >
למטא תג לעיל יש שתי תכונות:
- ה ' שֵׁם תכונה ' מציינת את שם הפונקציונליות שעבורה נוצר/משמש תג זה. לדוגמה, הגדרת ' נקודת מבט ' אל ה ' שֵׁם ' תכונה להתמודדות עם נקודת התצוגה של מכשירים שונים.
- ה ' תוֹכֶן ' תכונה מגדירה את ערך התכונה הקודמת. הוא מגדיר את הרוחב של כל מכשיר ומשנה את המסמך/דף האינטרנט ל-100%.
שלב 2: תמונות רספונסיביות
מכיוון שגודל התמונה משתנה זה מזה, לכן קשה להגדיר את אותו ' גוֹבַה ' או ' רוֹחַב ” נכס לכל תמונה. כאשר גודל התמונה קבוע, המשתמשים לא משנים את גודל תמונת דף האינטרנט עם המסך. עם זאת, משתמשים יכולים להגדיר את התמונה המגיבה באמצעות הקוד הבא:
img {
מקסימום- רוֹחַב : 100 %;
}
ה ' רוחב מקסימלי מאפיין CSS מגביל את הצגת התמונה בתוך השטח שהוקצה לה. על ידי הגדרת הערך ב-%, התמונה משתנה יחד עם שינוי הגודל של אלמנט האב שלה. זה יוצר אפקט תגובה לתמונה.
שלב 3: פריסת Flexbox
פריסת Flexbox מומלצת מאוד ליצירת עיצוב אתר רספונסיבי. זה מאפשר לרכיבי HTML להופיע במיקום מסוים ולשנות את גודל השטח הפנוי עבור כל ילד בהתאם לגודל הזמין על ידי div האב. פריסת Flexbox מכילה מספר מאפיינים המספקים חופש רב למפתח, כגון בקוד שלהלן:
< סִגְנוֹן >
.הוֹרֶה {
תצוגה: flex;
}
.יֶלֶד {
לְהַגמִישׁ: 1 ;
טֶקסט- ליישר : מרכז;
}
< / סִגְנוֹן >
< גוּף >
< div מעמד = 'הוֹרֶה' >
< div מעמד = 'יֶלֶד' סִגְנוֹן = 'border: 3px solid blueviolet;' >ברוך הבא< / div >
< div מעמד = 'יֶלֶד' סִגְנוֹן = 'border: 3px ירוק כהה מוצק;' >ל< / div >
< div מעמד = 'יֶלֶד' סִגְנוֹן = 'border: 3px אדום מלא;' >Linuxint< / div >
< / div >
< / גוּף >
בקטע הקוד שלמעלה:
- ראשית, צור רכיב אב עם המזהה של ' הוֹרֶה ' בתוך ה ' <גוף> 'תג.
- לאחר מכן, צור רכיבי div ילדים מרובים והקצה להם מחלקה של ' יֶלֶד '.
- לאחר מכן, בחר את ' הוֹרֶה ' מחלקה וספק את הערך של ' לְהַגמִישׁ 'עבור ה-CSS' לְהַצִיג ' תכונה.
- לאחר מכן, ספק ערך של ' 1 ' אל ה ' לְהַגמִישׁ ' נכס לכל ' יֶלֶד מחלקה שגורמת לאלמנט הילד להופיע כגמיש.
לאחר ביצוע הקוד לעיל, דף האינטרנט נראה כך:
הפלט שלמעלה מציג שרכיב הצאצא מקבל רוחב שווה כאשר גודל הדפדפן משתנה.
שלב 4: פריסת רשת
פריסת הרשת יוצרת רשת ומקצה את רכיבי ה-HTML בתוך חלק הרשת. רכיבי הרשת משתנים ביחס לגודל המסך של דף האינטרנט. זה יוצר עיצוב רספונסיבי כאשר גודל רכיב ה-HTML משתנה בהתאם למסך המכשיר:
< סִגְנוֹן >.מְכוֹלָה {
תצוגה: רשת;
עמודות-תבנית-רשת: 1fr 1fr 1fr;
}
< / סִגְנוֹן >
< גוּף >
< div מעמד = 'רְכִיב' >
< div סִגְנוֹן = 'border: 3px solid forestgreen;' >Linuxint< / div >
< div סִגְנוֹן = 'border: 3px ירוק כהה מוצק;' >Linuxint< / div >
< div סִגְנוֹן = 'border: 3px אדום מלא;' >Linuxint< / div >
< / div >
< / גוּף >
בקוד למעלה:
- ראשית, צור div הורה והקצה לו מחלקה של ' רְכִיב ' בתוך ה ' <גוף> 'תג. לאחר מכן, צור בו שלושה אלמנטים של ילד div.
- לאחר מכן, בקובץ ה-CSS הקצה ' רֶשֶׁת 'ערך ל' לְהַצִיג ' נכס עבור ' מְכוֹלָה ' div.
- לאחר מכן, צור שלושה חלקים בגודל שווה בדף האינטרנט באמצעות ' עמודה-תבנית-רשת ' מאפיין והגדר אותו שווה ל' 1fr 1fr 1fr ' כאשר fr פירושו ' שבריר '.
לאחר קומפילציה של הקוד לעיל, הפלט נראה כך:
הפלט מציג שה-divs משנים את גודלם בהתאם לגודל המסך בפרופורציות שוות.
שלב 5: שאילתות מדיה
השימוש בשאילתות מדיה כדי ליצור עיצוב רספונסיבי הוא סוג של דבר ישן, אבל עדיין, רוב האתרים משתמשים בשאילתות מדיה. ניתן להוסיף את שאילתות המדיה ישירות בקובץ ה-CSS לאחר הוספת סגנון ברירת המחדל עבור רכיב ה-HTML שנבחר. שאילתת המדיה הופכת את הקוד לקצת יותר ארוך ומבולגן. מכיוון שהמפתח צריך להכניס קוד לכל גודל מסך בנפרד.
לדוגמה, ראה את קטע הקוד שלהלן:
@ כְּלֵי תִקְשׁוֹרֶת מסך ו ( דקה- רוֹחַב : 640 פיקסלים ) {.רְכִיב {
רקע כללי- צֶבַע : ירוק יער;
}
}
בקטע הקוד שלמעלה:
- ראשית, הגדר את שאילתת המדיה המחילה מאפייני CSS על מחלקת האלמנטים שנבחרה ' רְכִיב ' כאשר רוחב גודל המסך גדול מ' 640 פיקסלים '.
- לאחר מכן, בחר את 'מחלקת הרכיבים והגדר את הערך של' ירוק יער ' בשביל ה ' צבע רקע ' תכונה.
.רְכִיב {
רקע כללי- צֶבַע : dodgerblue;
}
}
ואז לקטע הקוד שלמעלה:
- הגדר את שאילתת המדיה להחיל סגנונות כאשר גודל הרוחב קטן מ' 1000 פיקסלים '.
- כעת, בחר את ' רְכִיב ' מחלקה וספק ערך של ' דודג'רבלו ' בשביל ה ' צבע רקע ' תכונה:
לאחר ביצוע קטעי הקוד שלעיל, הפלט נראה כך:
הפלט מציג ששאילתת המדיה משנה את הרקע בהתבסס על גודל המסך. ניתן להחיל גם את גודל הגופן, הרוחב, הגובה ומאפייני CSS אחרים על ידי ביצוע אותה דפוס.
גדלי המסך האפשריים של נקודות עצירה שיש לקחת בחשבון בעת השימוש בשאילתות המדיה הם:
- ל ' קָטָן ' גודל מסך, הגדר את הרוחב קטן יותר מ' 640 פיקסלים '.
- ל ' בינוני ' גודל מסך נקודת התצוגה, הרוחב נע בין ' 641 פיקסלים ' ו' 1007 פיקסלים '.
- ל ' גָדוֹל ' גודל מסך, הגדר את הרוחב ל' 1008 פיקסלים ' או יותר.
סיכום
כדי ליצור עיצוב אתר רספונסיבי, המפתחים צריכים להוסיף את ' נקודת מבט 'תג ב' ' קטע תג. לאחר מכן, השתמש ב' Flexbox ' ו' רֶשֶׁת 'פריסה. מודולי פריסה אלו עוזרים ליצור עיצוב מגיב. בסופו של דבר, ה' שאילתות מדיה לעזור למפתח לעצב גרסאות שונות של אותו אתר עבור גדלי מסך שונים. מאמר זה הדגים את השלבים שבהם ניתן ליצור עיצוב אתר רספונסיבי.