איך לעצב אתר רספונסיבי בעזרת CSS3 Media Queries [מדריך]

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

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

בסוף הפוסט הזה אתם תדעו איך לבנות אתר רספונסיבי כמו בדוגמה הזאת.

מה זה עיצוב רספונסיבי (Responsive Web Design)?

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

עיצוב רספונסיבי הוא מושג שנולד בעקבות עלייתם של הסמארטפונים, הטאבלטים ולמעשה כל הטכנולוגיות ששינו את הדרך שבה אנחנו צורכים תוכן בווב. אם עד לפני כמה שנים גלישה באינטרנט נעשתה דרך מחשבי דסקטופ (נייחים) או מחשבים ניידים ברזולוציות זהות יחסית – מה שהיה מאוד נוח למפתחים ומעצבים ודרש מהם עיצוב קבוע ולא משתנה, הרי שהיום קיימים מאות מכשירים מהם ניתן לגשת לאתרי אינטרנט כמו סמארטפונים, טאבלטים, מחשבים נייחים, ניידים ואפילו טלויזיות – בהם צריך להתחשב, מכיוון שרוב הסיכויים שגישה לאתר אינטרנט שהותאם למחשב דסקטופ, לא יתאים לתצוגה במכשיר שמלכתחילה גודל המסך שלו קטן ב10″ אינצ’ים לפחות. אותו כנ”ל לגבי מסכי טלויזיה או אפילו מסכי מחשב (שרק ממשיכים לגדול), אם התאמתי את האתר לרוחב מסוים – צפיה במסך רחב יותר יתן ליוזר יותר מדי שטח מת (White Space) ויפגע בחווית הגלישה שלו.

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

איך יוצרים עיצוב רספונסיבי?

יש כמה שיטות לפיתוח עיצוב אתר רספונסיבי אחת מהם היא שימוש בג’אווה סקריפט. הסקריפט שנכתוב יבדוק את הרוחב של מסך המכשיר ולפי זה יטען את קובץ ה-CSS הרלוונטי. השיטה הזאת נחמדה, אבל יש בה בעיתיות מסוימת – מה קורה ב-Event של Window.resize? האם נצטרך להחליף בין הסטיילים השונים? האם נצטרך לטעון את כל הסטיילים מראש? זה יעיב על הביצועים של האתר. אז אולי נטען רק את הסטייל הלרוונטי? אבל אז יכול לקרות מצב שבו העמוד לא יקבל סטיילים (עד שהקובץ יסיים להטען) – גם זה פתיר, אבל אתם מבינים לאן אני חותר.

שיטה נוספת – השיטה בה אני הולך להתמקד היא שימוש CSS3 Media Queries. אחד משבעת נפלאות CSS3.

איך משתמשים ב-CSS3 Media Queries?

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

  • סמארטפונים: 320px.
  • טאבלטים: לאורך – 768px, לרוחב – 1024px.
  • דסקטופ + ניידים: 1024px ומעלה.

כך שלמעשה כשאנחנו באים לבנות את קובץ ה-CSS ומשתמשים ב-Media Queries נצטרך להתחשב בלפחות שלושה מצבים. תזכרו את זה.

בואו נתחיל מה-HTML.

[code]
<body>
// HTML5 Markup
<div id=”wrapper”>
<header>This is my header</header>
<section>Main Content area</section>
<aside>Sidebar</aside>
<footer>Footer Area</footer>
</div>
</body>
[/code]

השתמשתי בתגיות המארקאפ החדשות של HTML5 ויצרתי שלד לאתר מאוד בסיסי. יש לנו איזור Header, איזור תוכן ראשי שמחולק ל-2 (section וaside) ואיזור Footer – כולם עטופים ב-DIV בשם Wrapper.

נמשיך עם טעינת 2 קבצי CSS לתגית ה”head” ב-HTML שלנו. הקובץ הראשון: style.css – יכיל את כל הסטיילים הקשורים לעמוד ולא תלויים ברוחב המסך. צבעים, רקעים, מצבי Hover, ריווחים פנימיים וכו’… בנוסף, הם גם יכילו עיצוב מבנה ברירת מחדל לשלד האתר.

[code]<link href=”style.css” rel=”stylesheet” />[/code]

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

[code]<link href=”responsive.css” rel=”stylesheet” />[/code]

בואו נעיף מבט במה שהולך שם בפנים.
[code]
@media screen and (max-width: 960px) { … }
@media screen and (max-width: 758px) { … }
@media screen and (max-width: 480px) { … }
[/code]
זוכרים שבתחילת הפוסט כתבתי שאנחנו הולכים להתחשב בשלושה מצבים לפחות? ככה בדיוק עושים את זה. בואו ניקח לדוגמה את השורה השלישית שמטפלת בסמארטפונים:

[code]@media screen and (max-width: 480px) { … }[/code]

למעשה, בשורה הקטנה הזאת נוצר הקסם. מה שקורה פה זו איזושהי הצבה של תנאי: אם סוג המדיה שאנחנו נמצאים בה היא מסוג Screen (ולא Print – מדיית הדפסה) וגם רוחב המסך בו אנחנו נמצאים מגיע למקסימום – 480 פיקסלים (שזה הרוחב של מסך המכשיר), תתייחס לכל הסטיילים שכתובים בתוך הסוגריים המסולסלות. מה יקרה למסכים שהרוחב שלהם הוא מעבר ל-480 פיקסלים? הם יקבלו את העיצוב של ה-Media Query הבא בתור (במקרה שלנו – השורה השניה שמתייחסת ל-758 פיקסלים).

בואו נעבור על כל אחד מהתנאים ונראה איזה קוד מכניסים לתוכו. במקרה והמסך הוא עד רוחב 960px:

[code]
@media screen and (max-width: 960px){
#wrapper {
width: 758px;
overflow: hidden;
}
section {
width: 420px;
}
aside {
width: 230px;
}
}
[/code]

נקטין את הרוחב של ה-DIV העוטף ל-758, ונקטין בהתאם את הרוחב של איזור התוכן ואיזור הווידג’טים.

במקרה ורוחב המסך הוא עד 758px (מצב אורך של טאבלט ממוצע):

[code]
@media screen and (max-width: 758px){
#wrapper {
width: 480px;
}
section, aside {
float: none;
width: 440px;
}
}
[/code]

נקטין את הרוחב של הDIV העוטף ל480 פיקסלים ושימו לב שבמקרה כזה אני כבר מעביר את המיקום של איזור הווידג’טים אל מתחת לאיזור התוכן הראשי (ה-Section) – אני עושה את זה ע”י ביטול ההצפה (ה-Float) של שני האלמנטים. חוץ מזה אני גם נותן להם רוחב קבוע של 440px.

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

[code]
@media screen and (max-width: 480px){
#wrapper {
max-width: 480px;
width: auto;
margin: 20px;
}
section, aside {
float: none;
width: 92%;
padding: 4%;
}
}
[/code]

במקרה כזה צריך לנסות להיות כמה שיותר דינאמיים. לכן אגדיר ב-CSS שה-Wrapper יקבל רוחב מקסימלי של 480px כאשר הוא ידע להתאים את עצמו גם לפחות מזה. חוץ מזה, אני נותן לאיזורי התוכן Section ו-Aside רוחב באחוזים כדי שידעו להתאים את עצמם בצורה אופטימלית למסך.

את התוצאה הסופית תוכלו לראות כאן.

יש לכם שאלות בנושא עיצוב אתרים רספונסיביים? תרגישו חופשי לשאול בתגובות.

הפוסט פורסם במקור בבלוג Graphic & Technology

דניאל שטרנליכט

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

הגב

15 תגובות על "איך לעצב אתר רספונסיבי בעזרת CSS3 Media Queries [מדריך]"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
יוראי
Guest

אחלה פיצ’ר!
תודה דניאל כתוב יפה

שחר
Guest

אפשר בבקשה ליישר את קטעי הקוד לימין?

RJ
Guest

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

רמי
Guest

סקירה יפה, אבל הפרופורציות האלה לא חקוקות בסלע, ישנן פרופורציות נוספות שאפשר להשתמש בהן.

Shebo
Guest

כתבה טובה ואינפורמטיבית.
אפשר לראות “שדרוג” של היכולות של media query בפוסט הזה: http://css-tricks.com/lark-queries/ . גם css tricks בעצמם משתמשים בעיצוב דינאמי, נחמד לשחק עם זה.

וגם, תוסיפו בבקשה direction: ltr לקלאס qoate-code שלכם, כדי שיהיה אפשרי לקרוא את הקודים בצורה נוחה.

ליאור בר-און
Guest

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

הבעיה יכולה להיות קשה למדי אם אייפון מוריד את התמונות שיועדו לאייפד 3 – מכשיר בעל רזולוציה גבוהה ביותר. הבה פירוט של הבעיה:
http://cloudfour.com/css-media-query-for-mobile-is-fools-gold/

סה”כ אין פתרונות טובים. אנו מבצעים את הקישור של ה CSS בצד השרת (ע”פ זיהוי המכשיר), יש כאלו שעושים זאת בצד הלקוח ב JavaScript – שימוש ב media Queries פשוט יעלה בביצועים.

עד כמה שזכור לי יש הצעות תיקון לבעית ה Media Queries, אך אין לי לינק בשלוף.

ליאור

דניאל שטרנליכט
Guest

RJ – בכיף. אין בעיה.

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

Shebo – חוץ מCSS Tricks יש עוד המון בלוגים שנתנו סקירה בנושא. בנוסף תריץ חיפוש בגוגל עם המילים “Responsive Web Design Showcase” ותוכל למצוא מאות דוגמאות מצוינות לשימוש נכון בMedia Queries.

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

אסף
Guest

חשוב להגיד שיש צורך להוסיף

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

עופר
Guest

שכחת לשים את המטה תג :

בלי זה זה לא יעבוד בסמארטפונים.

עופר
Guest

אי אפשר בתגובות לשים תגים כנראה מה שהתכוונתי אליו נמצא כאן: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Oren Avidan
Guest

אחלה מדריך! מצויין לבוני אתרים ואפילו כאלה שרק מתחילים (הפשטות של הCSS עושה הכל…)
הייתי ממליץ לפרסם את זה גם בוובמאסטר…

ינון
Guest

הי,
למי שקצת מתעצל לקרוא – צילמתי סקרינקאסט בעברית על שימוש ב Media Queries כדי לבנות אתר מותאם בכתובת:
http://mobileweb.ynonperek.com/video/50677a946563d0075d000000

דודי
Guest

האתר שלי הוא בקוד HTML 4.01.
אני מעוניין לבנות גרסה לסמארטפונים והאפשרויות האם:

בניית אפליקציה עם סאב דומיין
http://www.mo.class-a-studio.co.il
או
http://www.m.class-a-studio.co.il

או בשיטה שאתה רשמת.

אשמח להבין מה עדיף בכדי לא לפגוע ב-SEO של האתר +
מה הכי אפקטיבי…?

כמו כן, האם יש לך המלצה על חברה/איש מקצוע שיכול לבצע זאת?

אילן
Guest

שלום

הייתי מעוניין לדעת אך ניתן למתמודד עם @media screen באקספולר 8 שהרי

אקספולר 8 לא מכיר את @media screen של css ולכן לא ניתן לזהות רזולוציה של אתר

בברכה
אילן

sara kohen
Guest

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

wpDiscuz

תגיות לכתבה: