אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » CSS3 » Media Queries

Media Queries

רן בר-זיק מאי 25, 2015 7:33 am אין תגובות

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

»CSS3 Flexbox – אלמנטים ילדים
»אנימציות עם CSS3
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

מומלץ לצפות באתר ברזולוציה 600x800 ובדפדפן מסוג IE גירסא 5.5 ומעלה.
מומלץ לצפות באתר ברזולוציה 600×800 ובדפדפן מסוג IE גירסא 5.5 ומעלה.

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

דוגמה של פס גלילה לרוחב
דוגמה של פס גלילה לרוחב

מומחי הממשלה יבואו ויאמרו: "מה אתה רוצה? האם נבנה אתר יעודי לסלולר? אין לנו משאבים כאלו! נכון שעל כל אתר מעפן אנחנו שופכים תקציב מטורלל בגובה זיליוני שקלים, אבל גם מנכ"ל טלדור צריך לאכול!".
אל דאגה מנמ"רי הממשלה החביבים, לא חייבים לבנות גרסה סלולרית לכל אתר. אפשר לבנות גם גרסה ריספונסיבית. אז נכון, לכתוב באתר כמו 'אינטרנט ישראל' שאמור להיות מוקדש ל"פיתוח אינטרנט מתקדם" על עיצוב ריספונסיבי זה כמו לכתוב באתר על מכוניות על המודל החדש של העגלה החדשה שיצאה לכת האמיש. אבל תמיד מאשימים אותי שאני יורד על האתרים העלובים של הממשלה בלי לנסות ולשפר, אז הנה התרומה שלי לעניין – הסבר על media queries.

בגדול, media queries הן הדרך של CSS לכתוב CSS שונה לרזולוציות שונות. דוגמה חיה? בוודאי – קחו את האתר הזה וצמצמו את החלון שבו הוא מוצג, או הכנסו אליו בסלולר – אפשר לראות איך עיצוב האתר משתנה באופן כזה שאין שום פס גלילה אופקי וקל יותר לקרוא את תכני האתר. איך? האם באמצעות קסם? לא. יש קטעי קוד של CSS שעובדים אם הרזולוציה היא עד 400 פיקסלים (טלפון נייד) וקטעים שעובדים רק אם הרזולוציה גדולה יותר. הטכניקה הזו נקראת media query והיא ממש פשוטה. זה נראה כך:

@media (min-width:360px) {
  .selector {
       color: red;
   }
}

מה יש לנו פה? זה סינטקס ולידי לחלוטין של CSS. הוא מופעל אך ורק כשהרוחב המינימלי של המסך הוא 360 פיקסלים. אם הרוחב הוא 200 פיקסלים (למשל) אז כל מה שיש בתוך הסוגריים המסולסלות פשוט לא יעבוד ולא יפעל כאילו הוא לא נכתב בכלל. כלומר זה יעבוד רק מ-360 ומעלה.

ומה עם הקוד הזה?

@media (max-width:360px) {
  .selector {
       color: red;
   }
}

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

אפשר כמובן לשלב:

@media (min-width:400px) {
    .selector {
         border: 3px solid red;
    }
}

@media (max-width:400px) {
    .selector {
         border: 3px solid yellow;
    }
}

כאן מה שיקרה הוא שהסלקטור שלנו יצבע את הגבול באדום בכל מסך שהגודל המינימלי שלו הוא 400 פיקסלים (כלומר 400 ומעלה). אם המסך יהיה 399 פיקסלים הכלל בכלל לא יופעל.
הסלקטור שלנו יצבע בצהוב את האלמנט אם המסך הוא בגודל מקסימלי של 400 פיקסלים – כלומר 400 ומטה. אם המסך יהיה 401 פיקסלים הכלל לא יופעל.

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

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

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

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

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

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

היום סביר להניח שלא יצא לכם לכתוב media query טבעיים, כיוון שרובנו משתמשים בפריימוורקים של CSS שיסדרו לנו את החיים – כמו bootstrap למשל, או foundation. אבל טוב לדעת ולהכיר. במיוחד את נושא נקודות השבירה.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
CSS CSS3

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

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

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד