השתמש בעצות אלה כדי ליצור פריסות רספונסיביות ביעילות.

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

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

1. התחל עם גיליון סגנונות גלובלי

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

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

דוגמא ה-CSS הבאה מאפסת את השוליים בכל האלמנטים ל-0, מגדירה את הטיפוגרפיה והצבע של כל הכותרות העיקריות, ומוסיפה שוליים עקביים לכולן:

instagram viewer 
גוּף,
h1,
h2,
h3,
ע {
שולים: 0;
}
h1,
h2,
h3 {
צֶבַע: כְּחוֹל;
משפחת גופן: "ורדנה" פונט סאנס סריף;
משקל גופן: 900;
גובה קו: 1;
}
h2,
h3,
ע {
שוליים-תחתית: 1rem;
}

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

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

2. הימנע מגדלים קבועים

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

במקום זאת, השתמש בגבהים וברוחבים הניתנים להתאמה. דרך אחת היא להשתמש מינימום גובה ו רוחב מינימלי במקום גוֹבַה ו רוֹחַב. לדוגמה, נניח שאתה מגדיר את הרוחב של אלמנט ל-600px. כאשר אתה קטן מ-600 פיקסלים, התוכן יעלה על גדותיו:

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

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

כּוֹתֶרֶת {
גוֹבַה: 200פיקסלים;
לְהַצִיג: רֶשֶׁת;
פריטי מקום: מֶרְכָּז;
}

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

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

זהו אחד מה טעויות ה-CSS הנפוצות ביותר שכדאי להימנע מהן.

3. זכור שהאתר שלך רספונסיבי כברירת מחדל

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

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

הבנה ואימוץ של עובדה זו יכולה באמת לעזור כשאתה כותב את קוד ה-CSS שלך. כאשר אתה נתקל בבעיות, תהיה בטוח שהשגיאה נובעת מה-CSS שכתבת. כך קל יותר למצוא את הבעיה ולתקן אותה.

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

הנה תרחיש אחד. תאר לעצמך שהרכיב עם שם המחלקה של .לְפַצֵל יש בתוכו שלושה אלמנטים. עם ה-CSS הבא, תיווצר פריסה של שלוש עמודות:

.לְפַצֵל {
לְהַצִיג: לְהַגמִישׁ;
כיוון הגמיש: שׁוּרָה;
פער: 2rem;
}

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

@כְּלֵי תִקְשׁוֹרֶת(מקסימום רוחב: 40 עמ') {
.לְפַצֵל {
לְהַצִיג: לַחסוֹם;
 }
}

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

עם זאת בחשבון, אתה יכול לשנות את הקוד שלך לשימוש בשאילתת מדיה אחת שחלה רק על מסכים גדולים. שם תעבור לשלוש עמודות כאשר המסך רחב יותר מ-40em:

@כְּלֵי תִקְשׁוֹרֶת(מקסימום רוחב: 40 עמ') {
.לְפַצֵל {
לְהַצִיג: לְהַגמִישׁ;
כיוון הגמיש: שׁוּרָה;
פער: 2rem;
 }
}

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

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

5. נצל את ה-CSS המודרני

באמצעות גישות CSS מודרניות, אתה יכול להתרחק מרוב בעיות היישור ונקודות השבירה ולהתקדם לעבר השגת עיצוב פנימי.

אחת הדרכים לעשות זאת היא:

h1 {-font-size: clamp (3rem, 1rem + 10vw, 7rem)}

זה מהדק את h1 בין גודל גופן מינימלי למקסימלי. הכי קטן שאנחנו רוצים שזה יגיע אליו 3 רמ והגבוה ביותר הוא 7 רם. האמצע הוא מה שנחזור עליו (1rem + 10 vw). כתוצאה מכך, הכותרת תצטמצם אוטומטית ככל שנקודת התצוגה תקטן ותגדל ככל שהיא תהיה גדולה יותר.

למידע נוסף על CSS מודרני

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