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

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

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

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

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

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

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

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

קרא עוד: גיליון הרמאות החיוני של מאפייני CSS3

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

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

@media בלבד / לא סוג מדיה ו- (ביטוי) {
/ * קוד CSS * /
}

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

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

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

מסך @media בלבד ו- (רוחב מקסימלי: 450 פיקסלים) {
גוּף{
צבע רקע: כחול;
}
}

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

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

/ * עיצוב לסמארטפונים * /
@media (רוחב מקסימלי: 450 פיקסלים) {
גוּף{
צבע רקע: כחול;
}
}

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

השיטה הפנימית כוללת הוספת ה-

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

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

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

/ * עיצוב לטאבלטים * /
@media (רוחב מקסימלי: 800 פיקסלים) {
גוּף{
צבע רקע: אדום;
}
}

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

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

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

/ * עיצוב לטאבלטים * /
@media (רוחב מקסימלי: 800 פיקסלים) ו- (מינימום רוחב: 451) {
גוּף{
צבע רקע: אדום;
}
}

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

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

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

 גיליון סגנונות ראשי 

 גיליון סגנונות לטאבלט 
href = "tablet.css">
 גיליון סגנונות לסמארטפון 

את הקוד לעיל יש למקם ב

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

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

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

אשראי תמונה: שטח שלילי /פקסלים

כיצד להגדיר תמונת רקע ב- CSS

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

קרא הבא

על הסופר