פוסט זה יציין את ההנחיות הנחוצות ליישום שאילתות מדיה.
כיצד ליישם שאילתות מדיה עבור מכשירים ניידים?
ניתן להחיל את שאילתת המדיה על מכשירים ניידים פשוט על ידי אזכור ' @כְּלֵי תִקְשׁוֹרֶת ” תג וציון גודל המסך בסוגרים הקטנים. לאחר מכן ניתן להוסיף את ה-CSS עבור שאילתת המדיה הזו בתוך הסוגרים המתולתלים. בכל פעם שגודל המסך מתאים לגודל שצוין על ידי המשתמש, הוא יחיל את שאילתת המדיה המצוינת.
בואו נסקור דוגמה מעשית כדי ללמוד את היישום של שאילתות מדיה עבור מכשירים ניידים.
דוגמה: צור פריסה שמשתנה מפריסת שתי עמודות לפריסת עמודה אחת על ידי החלת שאילתות מדיה
בדוגמה שלהלן, הפריסה של דף האינטרנט תשתנה מפריסת עמודה לפריסה של עמודה אחת:
שלב 1: צור מבנה HTML
- ראשית, צור קובץ HTML וקשר את קובץ גיליון הסגנונות החיצוני של CSS בו סָעִיף.
- לאחר מכן, צור א
מקטע והוסף את כותרת האתר באמצעות תָג. - ליצור לפי שם המחלקה של 'מחלקה-container' ועוד שנייםבתוכו יש את שם המחלקה של ' טור '. < גוּף >
< h1 > רמז ללינוקס < / h1 >
< / כותרת>
< div מעמד = 'מחלקת מיכל' >
< div מעמד = 'טור' >
< h2 > סעיף אחד < / h2 >
< ע > Linux Hint היא אחת מפלטפורמות הלמידה האלקטרוניות הטובות ביותר. < / ע >
< / div >
< div מעמד = 'טור' >
< h2 > סעיף שני < / h2 >
< ע > Linux Hint היא אחת מפלטפורמות הלמידה האלקטרוניות הטובות ביותר. < / ע >
< / div >
< / div >
< / גוּף >שלב 2: החל CSS
על חלק הגוף:- ראשית, ציין את קטע הגוף על ידי כתיבת ' גוּף ” תייגו ומזכירים את הפלטה המתולתלת.
- בתוך הפלטה, ציין את משפחת הגופנים, צבע הרקע, השוליים והריפוד.
על
סָעִיף:
- ציין את צבע הטקסט, יישור הטקסט, צבע הרקע והריפוד.
על 'מחלקת מיכל' div:
- הגדר את ' לְהַצִיג 'ערך הנכס ל' לְהַגמִישׁ ' כדי ליצור את ה-Flexbox.
- להשתמש ב ' להצדיק-תוכן ' כדי להוסיף רווח בין התוכן ולהוסיף ריפוד.
בשיעור עמודות:
- ראשית, ציין את הערך המוצהר ל' לְהַגמִישׁ ' מאפיין כדי להוסיף רווח בין שני חלקי הפריסה.
- לאחר מכן, הוסף את צבע הרקע, הגבול, הריפוד וגודל הקופסה.
שלב 3: החל שאילתת מדיה
- כדי להחיל שאילתת מדיה עבור מכשירים ניידים, תחילה, הוסף את ' @כְּלֵי תִקְשׁוֹרֶת 'תג.
- לאחר מכן, ציין את הערך ' 768 פיקסלים ' שאופייני למכשירים ניידים ל' רוחב מקסימלי ” רכוש בתוך הפלטה הקטנה.
- לאחר מכן, ציין את ' טור 'ערך ל' כיוון הגמיש ' נכס שיחול על ' מחלקה מסוג container-class. פעולה זו תשנה את שתי העמודות לעמודה אחת בכל פעם שגודל המסך שצוין מזוהה.
- לבסוף, החל CSS על ' טור ' מחלקה וציין ' שולים ' ו' לְהַגמִישׁ ערכים:
font-family: sans-serif;
רקע כללי- צֶבַע : כסף;
שולים: 0 ;
ריפוד: 0 ;
}
כּוֹתֶרֶת {
רקע כללי- צֶבַע : #2f4f4f;
ריפוד: 20px;
טֶקסט- ליישר : מרכז;
צֶבַע : לבן;
}
.מְכוֹלָה- מעמד {
תצוגה: flex;
לְהַצְדִיק- תוֹכֶן : רווח-בין;
ריפוד: 20px;
}
.טור {
לְהַגמִישׁ: 0 1 calc ( חמישים % - 10 פיקסלים ) ;
גבול : 1px ירוק אחיד;
רקע כללי- צֶבַע : לבן;
גודל קופסא: border-box;
ריפוד: 20px;
}
@ כְּלֵי תִקְשׁוֹרֶת ( מקסימום- רוֹחַב : 768 פיקסלים ) {
.מְכוֹלָה- מעמד {
flex-direction: עמודה;
}
.טור {
לְהַגמִישׁ: 0 1 100 %;
margin-bottom: 20px;
}
}תְפוּקָה
הנה הפלט של דף האינטרנט לאחר החלת שאילתת מדיה. פלט זה הוא פריסה מגיבה של שתי עמודות:
בכל פעם שהמסך עונה על הממדים שצוינו באמצעות שאילתת מדיה לנייד, הוא הופך לפריסה של עמודה אחת:
סיכום
כדי ליישם שאילתות מדיה עבור מכשירים ניידים, תחילה, כלול את ' נקודת מבט ' בתוך ה ' רֹאשׁ ' סעיף. לאחר מכן, כתוב CSS ספציפי לעיצוב נייד. לאחר מכן, הוסף את שאילתת המדיה על ידי שימוש בתג '@media' וציון גודל מסך הנייד. לדוגמה, ציין 768 פיקסלים עבור טאבלטים ו-480 פיקסלים עבור טלפונים ניידים. מאמר זה הסביר את ההליך להטמעת שאילתות מדיה עבור מכשירים ניידים.