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

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

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

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

בעיקרו של דבר, משתני CSS מאפשרים לך לדלג על הדרך הישנה להגדרת סגנונות:

h1 {גודל גופן: 30 פיקסלים; }
סרגל nav> a {גודל גופן: 30 פיקסלים; }

... לכן:

: שורש {- בסיס-גודל הגופן: 30 פיקסלים; }
h1 {גודל גופן: var (- גודל גופן בסיסי); }
סרגל nav> a {גודל גופן: var (- גודל גופן בסיסי); }

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

אם ברצונך ללמוד משתני CSS כראוי, אנא עיין בקורס משתנה CSS החינמי והאינטראקטיבי שלי על Scrimba:

הקורס מכיל שמונה שידורי מסך אינטראקטיביים.

אם ברצונך ללמוד עוד על הקורס, תוכל גם לקרוא מבוא למאמרים הבאים:

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

הממסד

אנו הולכים להוסיף היענות רבה יותר לאתר פורטפוליו שנראה כך:

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

משמאל: איך זה נראה בהתחלה בטלפון הנייד. מימין: איך זה צריך להיראות?

בתמונה מימין ביצענו שינויים בסגנונות בכדי לגרום להם לעבוד טוב יותר במכשירים ניידים. הנה מה שעשינו:

  1. הרשת סודרה מחדש כך שהיא מוערמת אנכית במקום על פני שתי עמודות.
  2. הפריסה כולה הועברה מעט למעלה
  3. מכווץ את הגופנים

לשם כך נאלצנו לשנות את ה- CSS הבא:

h1 {גודל גופן: 30 פיקסלים; }
#navbar {margin: 30px 0; }
#navbar a {גודל גופן: 30 פיקסלים; }
.Grid {שוליים: 30 פיקסלים 0; עמודות תבנית רשת: 200 פיקסלים 200 פיקסלים; }

במיוחד היינו צריכים לבצע את השינויים הבאים בשאילתת מדיה:

  • צמצם את גודל הגופן של h1 ל- 20 פיקסלים
  • צמצם את השוליים מעל ומתחת לסרגל #nav ל 15 פיקסלים
  • צמצם את גודל הגופן בסרגל #nav ל -20 px
  • צמצם את השוליים מעל הרשת ל -15 פיקסלים
  • שנה את הרשת מ"שתי עמודות "ל"עמודה אחת"
הערה: גם בבוחרים אלה, יש כמובן הרבה יותר CSS ביישום זה. עם זאת, עבור הדרכה זו הסרתי את כל מה שאיננו משנים בשאילתת המדיה. בדוק את מגרש המשחקים הזה עבור כל הקוד.

הדרך הישנה

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

@media הכל ו- (רוחב מקסימלי: 450 פיקסלים) {סרגל סרגל {שוליים: 15 פיקסלים 0; } סרגל סרגל a {גודל גופן: 20 פיקסלים; } h1 {גודל גופן: 20 פיקסלים; }
.Grid {שוליים: 15 פיקסלים 0; עמודות תבנית רשת: 200 פיקסלים; }
}

הדרך החדשה

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

: שורש {- בסיס-גודל הגופן: 30 פיקסלים; - עמודות: 200 פיקסלים 200 פיקסלים; שולי בסיס: 30 פיקסלים; }

ואז אנחנו פשוט משתמשים במשתנים האלה בכל האפליקציה:

#navbar {margin: var (- margin-margin) 0; }
#navbar a {גודל גופן: var (- גודל גופן בסיסי); }
h1 {גודל גופן: var (- גודל גופן בסיסי); }
.Grid {margin: var (- margin-margin) 0; עמודות תבנית רשת: var (- עמודות); }

ברגע שיש לנו הגדרה זו אנו יכולים פשוט לשנות את ערכי המשתנים בשאילתת המדיה:

@media הכל ו- (רוחב מקסימלי: 450 פיקסלים) {: שורש {- עמודות: 200 פיקסלים; שולי בסיס: 15 פיקסלים; - גודל גופן בסיסי: 20 פיקסלים; }

זה הרבה יותר נקי ממה שהיה לנו קודם. אנו מכוונים רק ל- root ולא לציין את כל הסלקטורים.

צמצמנו את שאילתת התקשורת שלנו מארבעה סלקטורים לאחד ומשליש עשרה לארבע.

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

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

תהפוך למאסטר משתנה של CSS תוך זמן קצר :)

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