בנה אתר רספונסיבי בשבוע: שאילתות מדיה (חלק 4)

מְחַבֵּר: Randy Alexander

תאריך הבריאה: 2 אַפּרִיל 2021

תאריך עדכון: 16 מאי 2024

וִידֵאוֹ: How to Create a Responsive Website from Scratch - Part 4: Building a Responsive Portfolio Section

תוֹכֶן

01. הוספת שאילתות מדיה
02. אנטומיה של שאילתת תקשורת
03. דבר נוסף ...
04. בחירת נקודות עצירה
05. התאמת התמונות הממוזערות שלנו
06. לא רק רוחב

נדרש ידע: CSS ו- HTML ביניים
דורש: עורך טקסטים, דפדפן מודרני, תוכנת גרפיקה
זמן הפרויקט: שעה (5 שעות סה"כ)
קובץ תמיכה

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

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

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

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

01. הוספת שאילתות מדיה

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

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

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

.מסמך {
ריפוד: 0 5%;
}
.עיקר {
רוחב: 74.242424242424%; / * 784/1056 * /
לצוף: שמאלה;
}
. משלים {
רוחב: 22.727272727273%; / * 240/1056 * /
לצוף: מימין;
}

כפי שלמדנו בחלק השני של הדרכה זו, אנו משתמשים בנוסחה הבאה כדי לחשב את רוחב האחוז של העמודות האלה:

(יעד / הקשר) * 100 = תוצאה

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

כאן נכנסות שאילתות מדיה. בהנחה כי פריסה זו אמורה להיכנס לתוקף רק כאשר הדפדפן רחב מ- 768 פיקסלים, אנו יכולים להוסיף את ה- CSS הבא:

.מסמך {
ריפוד: 0 5%;
}
מסך @media ו- (רוחב מינימלי: 768 פיקסלים) {
.עיקר {
רוחב: 74.242424242424%; / * 784/1056 * /
לצוף: שמאלה;
}
. משלים {
רוחב: 22.727272727273%; / * 240/1056 * /
לצוף: מימין;
}
}

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

02. אנטומיה של שאילתת תקשורת

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

מסך @media: החלק הראשון של שאילתת מדיה הוא סוג המדיה. יתכן שתזהה תחביר זה אם אי פעם כללת סגנונות הדפסה ב- CSS שלך. אתה יכול גם לזהות את שם הסוג מה- כְּלֵי תִקְשׁוֹרֶת תכונה על קישור> אֵלֵמֶנט. הסיבה לכך היא ששניהם מקבלים את הסט המאושר של סוגי המדיה המצוי במפרט CSS 2.1.
(מינימום רוחב: 768 פיקסלים): החלק השני הוא ה שאילתא. זה כולל את תכונה להישאל (במקרה זה הרוחב המינימלי של נמל התצוגה) ואת המקביל ערך לבדיקה (768 פיקסלים).

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

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

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

מסך @media ו- (מינימום רוחב: 768 פיקסלים) ו- (כיוון: נוף) {
...
}

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

03. דבר נוסף ...

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

כדי להבין מדוע זה קורה, עלינו ללמוד שיעור היסטוריה קצר.

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

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

מטא שם = "תצוגה" תוכן = "קנה מידה ראשוני = 1.0, רוחב = רוחב מכשיר" />

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

04. בחירת נקודות עצירה

נחזור לשאילתת התקשורת שלנו:

מסך @media ו- (רוחב מינימלי: 768 פיקסלים) {
...
}

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

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

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

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

איך אנחנו 800px מבטאים ב- ems? שוב אנו יכולים להשתמש בנוסחה שלנו, אך מה ההקשר? בעת חישוב ems לשאילתות מדיה, ההקשר הוא תמיד גודל הגופן המוגדר כברירת מחדל של הדפדפן לא משנה אם ערך זה נעקל ב- CSS שלך. ברירת מחדל זו היא בדרך כלל 16 פיקסלים, מה שמקנה לנו:

800 / 16 = 50

כעת אנו יכולים לעדכן את שאילתת המדיה שלנו כך:

מסך @media ו- (מינימום רוחב: 50em) {/ * 800px * /
...
}

05. התאמת התמונות הממוזערות שלנו

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

הנה CSS המקורי שלנו:

ol.media li.media-item {
צבע רקע: #fff;
שוליים: 0 4.16666666667% 4.16666666667% 0;
רוחב: 47.91666666667%;
לצוף: שמאלה;
}
ol.media li.media-item: nth-child (2n) {
שוליים-ימניים: 0;
}

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

מסך @media ו- (מינימום רוחב: 35em) {
.media-item {
רוחב: 30.612244897959%; / * 240/784 * /
מרווח: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16 פיקסלים 0 * /
}
.media-item: nth-child (3n) {
שוליים-ימניים: 0;
}
}

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

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

ol.media li.media-item: nth-child (2n) {
שוליים-ימניים: 0;
}

עלינו לשנות את ה- CSS בשאילתת המדיה שלנו כדי לאפס את הערך:

בעת יצירת שאילתות מדיה, תמיד להיות מודעים לבעיות ירושה כמו זה.

06. לא רק רוחב

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

.media-object-wrapper {
ריפוד תחתון: 56.25%;
רוחב: 100%;
גובה: 0;
מיקום: קרוב משפחה;
}
מסך @media ו- (גובה מקסימלי: 35em) ו- (כיוון: נוף) {/ * 560px * /
.media-object-wrapper {
רוחב: 60%;
ריפוד תחתון: 33.75%;
}
}

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

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