איך כותבים שאילתת מדיה CSS?

מסך @media ו- (מינימום רוחב: 1000 פיקסלים) {}

זהו התחביר של שאילתת מדיה. זה מתחיל ב @כְּלֵי תִקְשׁוֹרֶת להקים את שאילתת המדיה עצמה. לאחר מכן, הגדר את סוג המדיה, שהוא במקרה זה מָסָך. סוג זה חל על מסכי מחשב שולחניים, טאבלטים, טלפונים וכו '. סיים את שאילתת המדיה באמצעות תכונת מדיה. בדוגמה שלנו לעיל, כלומר רוחב אמצע: 1000 פיקסלים. פירוש הדבר ששאילתת המדיה נכנסת לתצוגות ברוחב מינימלי של 1000 פיקסלים.

לאחר אלמנטים אלה של שאילתת המדיה, הוסף סוגר מתולתל פתיחה וסגירה הדומה למה שהיית עושה בכל כלל CSS רגיל.

השלב האחרון לשאילתת מדיה הוא להוסיף את כללי ה- CSS שיחולו לאחר התנאי הזה. הכנס את כללי CSS אלה בין הפלטה המתולתלת המרכיבה את שאילתת המדיה, כך:

 מסך @media ו- (min-width: 1000px) {body {font-size: 20px; }

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





instagram viewer

מקום כמו רבים כללי CSS בשאילתת מדיה זו לפי הצורך בכדי להתאים את המראה החזותי של האתר שלך. לדוגמה, כדי לא רק להגדיל את גודל הגופן ל -20 פיקסלים, אלא גם לשנות את צבע כל הפסקאות לשחור (# 000000), הוסף את זה: 
מסך @media ו- (מינימום רוחב: 1000 פיקסלים) {
גוף {
גודל גופן: 20 פיקסלים;
}
p {
צבע: # 000000;
}
}
 הוספת שאילתות מדיה נוספות 

בנוסף, תוכל להוסיף שאילתות מדיה נוספות לכל גדלים גדולים יותר ולהכניס אותם לגליון הסגנונות שלך כך: 
מסך @media ו- (מינימום רוחב: 1000 פיקסלים) {
גוף {
גודל גופן: 20 פיקסלים;
}
p {
צבע: # 000000;
{
}
מסך @media ו- (רוחב מינימלי: 1400 פיקסלים) {
גוף {
גודל גופן: 24 פיקסלים;
}
}

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

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

אם אתה משתמש רוחב מקסימלי, זה עובד בצורה הפוכה. שאילתת מדיה של "רוחב מקסימלי: 1000 פיקסלים" חלה לאחר שהדפדפן ירד מתחת לגודל זה. 

ציטט מאמר זה.