מעצבים יכולים לשנות את העיצובים שלהם בהתאם למשתמשים. הדוגמה הכי ברורה לכך היא גורם הצורה של המכשיר של המשתמש, הרוחב, יחס הגובה-רוחב של המכשיר ועוד. בעזרת שאילתות מדיה, מעצבים יכולים להגיב לפורמטים השונים האלה.
שאילתות מדיה מופעלות באמצעות מילת המפתח @media (כלל at-rule של CSS), ואפשר להשתמש בהן במגוון תרחישים לדוגמה.
טירגוט לסוגים שונים של פלט
אתרים מוצגים לרוב במסכים, אבל אפשר להשתמש ב-CSS גם כדי לעצב אתרים לפלטפורמות אחרות. יכול להיות שתרצו שדפי האינטרנט ייראו בצורה מסוימת במסך, אבל שונה כשהם מודפסים. אפשר לעשות זאת באמצעות שאילתות לגבי סוגי מדיה.
בדוגמה הזו, צבע הרקע מוגדר לאפור. אבל אם הדף מודפס, צבע הרקע צריך להיות שקוף. הפעולה הזו שומרת את הדיו למדפסת של המשתמש.
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
אפשר להשתמש בכלל @media בגיליון הסגנונות באופן הזה, או ליצור גיליון סגנונות נפרד ולהשתמש במאפיין media ברכיב link:
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">
אם לא מציינים סוג מדיה ל-CSS, הערך של סוג המדיה יהיה all באופן אוטומטי. שני קטעי הקוד הבאים ב-CSS זהים:
body {
color: black;
background-color: white;
}
@media all {
body {
color: black;
background-color: white;
}
}
גם שתי שורות ה-HTML הבאות זהות:
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="global.css" media="all">
תנאי השאילתה
אפשר להוסיף תנאים לסוגי מדיה. אלה נקראים שאילתות מדיה. ה-CSS יחול רק אם סוג המדיה תואם וגם התנאי מתקיים. התנאים האלה נקראים תכונות מדיה.
זהו התחביר של שאילתות מדיה:
@media type and (feature)
אפשר להשתמש בבקשות מדיה ברכיב link אם הסגנונות נמצאים בגיליון סגנונות נפרד:
<link rel="stylesheet" href="specific.css" media="type and (feature)">
נניח שאתם רוצים להחיל סגנונות שונים בהתאם למצב של חלון הדפדפן לרוחב (רוחב אזור התצוגה גדול מהגובה שלו) או לאורך (גובה אזור התצוגה גדול מהרוחב שלו).
יש תכונה של מדיה שנקראת orientation שאפשר להשתמש בה כדי לבדוק את הדברים הבאים:
@media all and (orientation: landscape) {
// Styles for landscape mode.
}
@media all and (orientation: portrait) {
// Styles for portrait mode.
}
לחלופין, אם אתם מעדיפים להשתמש בגיליונות סגנונות נפרדים:
<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">
במקרה כזה, סוג המדיה הוא all. מכיוון שזהו ערך ברירת המחדל, אפשר להשמיט אותו אם רוצים:
@media (orientation: landscape) {
// Styles for landscape mode.
}
@media (orientation: portrait) {
// Styles for portrait mode.
}
או באמצעות גיליונות סגנונות נפרדים:
<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
יכול להיות ששימוש בגיליונות סגנונות נפרדים לסוגים שונים של מדיה – כמו print – הוא בסדר, אבל כנראה שלא כדאי להשתמש בגיליונות סגנונות נפרדים לכל שאילתה של מדיה. במקום זאת, אפשר להשתמש ב-@media-כללים.
שינוי סגנונות על סמך גודל אזור התצוגה
בעיצוב רספונסיבי, אחת מתכונות המדיה השימושיות ביותר כוללת את המאפיינים של אזור התצוגה בדפדפן.
כדי להחיל סגנונות כשחלון הדפדפן רחב יותר מרוחב מסוים, משתמשים ב-min-width.
@media (min-width: 400px) {
// Styles for viewports wider than 400 pixels.
}
אפשר להשתמש בתכונת המדיה max-width כדי להחיל סגנונות מתחת לרוחב מסוים:
@media (max-width: 400px) {
// Styles for viewports narrower than 400 pixels.
}
אפשר להשתמש בכל יחידת אורך של CSS בשאילתות המדיה.
אם התוכן שלכם מבוסס בעיקר על תמונות, יכול להיות שפיקסלים יהיו האפשרות הטובה ביותר.
אם התוכן שלכם מבוסס בעיקר על טקסט, כנראה שתהיה לכם יותר תועלת משימוש ביחידה יחסית שמבוססת על גודל הטקסט, כמו em או ch:
@media (min-width: 25em) {
// Styles for viewports wider than 25em.
}
אפשר גם לשלב שאילתות מדיה כדי להחיל יותר מתנאי אחד.
משתמשים במילה and כדי לשלב את שאילתות המדיה:
@media (min-width: 50em) and (max-width: 60em) {
// Styles for viewports wider than 50em and narrower than 60em.
}
בחירת נקודות עצירה על סמך התוכן
הנקודה שבה התנאי של תכונה של מדיה הופך ל-True נקראת נקודת עצירה (breakpoint). מומלץ לבחור את נקודות הצירוף על סמך התוכן שלכם, ולא על סמך הגדלים הפופולריים של המכשירים, כי הם עשויים להשתנות בכל מחזור השקה של טכנולוגיה.
בדוגמה הזו, 50em הוא הנקודה שבה שורות הטקסט נעשות ארוכות באופן אי-נוחות.
לכן נוצר נקודת עצירה כדי שהממשק יהיה קריא יותר.
באמצעות המאפיין column-count, הטקסט מחולק לשתי עמודות מאותה נקודה ואילך.
@media (min-width: 50em) {
article {
column-count: 2;
}
}
שילובים
אפשר להשתמש בשאילתות מדיה על סמך הגובה של אזור התצוגה, ולא רק על סמך הרוחב. האפשרות הזו יכולה להיות שימושית לצורך אופטימיזציה של תוכן הממשק שמוצג בחלק העליון והקבוע. בדוגמה הקודמת, אם הקוראים משתמשים בחלון דפדפן רחב אבל קצר, הם צריכים לגלול עמודה אחת למטה ואז לגלול חזרה למעלה כדי להגיע לחלק העליון של העמודה השנייה. יהיה בטוח יותר להחיל את העמודות רק כאשר אזור התצוגה הוא רחב מספיק וגם גבוה מספיק.
אפשר לשלב שאילתות מדיה כך שהסגנונות יחולו רק אם כל התנאים מתקיימים.
בדוגמה הזו, כדי שסגנונות העמודות יחולו, חלון התצוגה צריך להיות ברוחב של 50em לפחות ובגובה של 60em לפחות.
נקודות העצירה נבחרו על סמך כמות התוכן.
@media (min-width: 50em) and (min-height: 60em) {
article {
column-count: 2;
}
}
בדוגמאות האלה אפשר לראות איך אפשר להשתמש בשאילתות מדיה כדי להתאים עיצובים לפורמט של המכשיר של המשתמש, אבל הן רק קצה הקרחון של האפשרויות. שאילתות מדיה יכולות להגיע הרבה מעבר לרוחב ולגובה, ולגשת להעדפות של המשתמשים לגבי תכונות נגישות וצבעים של עיצוב. שימוש בשאילתות מדיה כדי לבצע התאמות של הפריסה הוא התחלה מצוינת לעיצוב רספונסיבי, שמבוסס על התכונות האלה ועוד.
בדיקת ההבנה
בוחנים את הידע שלכם לגבי שאילתות מדיה רספונסיביות.
קיימות שאילתות מדיה רק לגבי גודל המסך?
האם מסכים הם המקום היחיד שבו תוכן אינטרנט מוצג או נצרך?
מהו סוג המדיה שמוגדר כברירת מחדל?
screenscreen הוא לא סוג ברירת המחדל.nonenone אינו סוג מדיה תקין.allsomesome הוא לא סוג מדיה תקין.landscapelandscape אינו סוג מדיה תקין.מה משמש אותך כדי למנוע מהדפדפן לשנות את קנה המידה של העיצוב בנייד?
width: 100%font-size: 200%<meta name="viewport" content="width=device-width, initial-scale=1">שאילתת המדיה שתחול כאשר חלון הדפדפן נמצא מעל 720px.
@media (width: 720px)720px.@media (max-width: 720px)720px.@media (min-width: 720px)720px לפחות.@media (clamp-width: 720px)clamp-width אינו תנאי תקין של מאפיין של שאילתה לגבי מדיה.