המעצבים יכולים להתאים את העיצוב שלהם למשתמשים. הדוגמה הכי ברורה לכך היא גורם הצורה של המכשיר של המשתמש. הרוחב, יחס הגובה-רוחב של המכשיר וכו'. בעזרת שאילתות מדיה, המעצבים יכולים להגיב לגורמי הצורה השונים האלה.
שאילתות מדיה מופעלות באמצעות מילת המפתח @media (כלל 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.
}
בחירת נקודות עצירה (breakpoint) בהתאם לתוכן
הנקודה שבה תנאי של תכונת מדיה מתקיים נקראת נקודת עצירה (breakpoint). מומלץ לבחור את נקודות העצירה (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 הוא לא סוג מדיה תקין.באילו פעולות השתמשת כדי למנוע מהדפדפן לבצע התאמה לעומס (scaling) של עיצוב בנייד?
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 הוא לא תנאי חוקי לתכונה של שאילתת מדיה.