כיצד להשתמש בשאילתות מדיה ב- HTML וב- CSS ליצירת אתרים רספונסיביים

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

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

---

---

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

הבנת עיצוב רספונסיבי

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

• שימוש ביחידות רם ו- em במקום פיקסלים (פיקסלים)
• הגדרת נקודת התצוגה/קנה המידה של כל דף אינטרנט
• שימוש בשאילתות מדיה

מהן שאילתות מדיה?

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

קרא עוד: גיליון הרמאות Essential CSS3

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

---

---

שימוש בשאילתות מדיה

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

מבנה שאילתות המדיה

דוגמה למבנה שאילתת מדיה


@media only/not media-type and (expression){
/*CSS code*/
}

המבנה הכללי של שאילתת מדיה כולל:

---

---

• מילת המפתח @media
• מילת המפתח לא/היחידה
• סוג מדיה (שיכול להיות מסך, הדפסה או דיבור)
• מילת המפתח ו
• ביטוי ייחודי הסוגר בסוגריים
• קוד CSS המצורף בזוג פלטות מתולתלות פתוחות וסגורות.

קָשׁוּר: שימוש ב- CSS לעיצוב מסמכים להדפסה

דוגמה לשאילתת מדיה עם מילת המפתח היחידה


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

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

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

דוגמא ברירת מחדל לשאילתת מדיה


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

הצבת שאילתות מדיה

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

השיטה הפנימית כוללת הוספת התג לתג של קובץ ה- HTML ויצירת שאילתת המדיה בתוך הפרמטרים של התג.

השיטה החיצונית כוללת יצירת שאילתת מדיה בקובץ CSS חיצוני וקישורו לקובץ ה- HTML שלך באמצעות התג.

טווח שאילתות המדיה

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

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

דוגמא לשאילתת מדיה בטאבלט


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}


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

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

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

שאילתת מדיה בטאבלט עם דוגמה לטווח


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}


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

קישור שאילתות מדיה

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

התג הוא רכיב HTML המשמש לייבוא ​​עיצוב CSS מגליון סגנונות חיצוני. לתג זה יש נכס מדיה שעובד באותו אופן כמו שאילתת מדיה ב- CSS.

שימוש בשאילתות מדיה בדוגמת תג הקישור




href='tablet.css'>




יש להציב את הקוד למעלה בתג של קובץ ה- HTML שלך. כל שעליך לעשות הוא ליצור שלושה קבצי CSS נפרדים עם שמות הקבצים main.css, tablet.css ו- smartphone.css - ואז ליצור את העיצוב הספציפי שאתה רוצה עבור כל מכשיר.

הסגנון בקובץ הראשי יחול על כל המסכים ברוחב גדול מ- 800px, הסגנון בקובץ הטאבלט יחול על כל המסכים ברוחב שבין 450px ל- 801px, והסגנון בקובץ הסמארטפון יחול על כל המסכים למטה 451 פיקסלים.

דבר עם אפליקציות טקסט לאנדרואיד בחינם

עכשיו יש לך את הכלים ליצירת עיצובים רספונסיביים

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

קרדיט תמונה: מרחב שלילי/ Pexels

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל כיצד להגדיר תמונת רקע ב- CSS

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

קרא הבא נושאים קשורים

• תִכנוּת
• בניית אתרים
• עיצוב אתרים
• CSS

על הסופר קדישא קין(פורסמו 21 מאמרים)

Kadeisha Kean היא מפתחת תוכנה מלאה וכותבת טכנית/טכנולוגית. יש לה את היכולת המובהקת לפשט כמה מהמושגים הטכנולוגיים המורכבים ביותר; לייצר חומר שניתן להבין אותו בקלות על ידי כל טירון טכנולוגי. היא נלהבת לכתוב, לפתח תוכנות מעניינות ולטייל ברחבי העולם (באמצעות סרטים דוקומנטריים).

עוד מ- Kadeisha Kean

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה