איך אתה כותב שאילתות CSS Media?

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

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

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

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

אז איך אתה משתמש שאילתות מדיה באתר אינטרנט? הנה דוגמה פשוטה מאוד:

1. אתה תתחיל עם מסמך HTML מובנה היטב ללא כל סגנונות חזותיים (זה מה CSS עבור)
2. בקובץ ה- CSS שלך, אתה תתחיל כמו שאתה עושה בדרך כלל על ידי עיצוב הדף וקביעת בסיס איך האתר ייראה. תגיד שאתה רוצה את גודל הגופן של הדף להיות 16 פיקסלים, אתה יכול לכתוב את זה CSS: body {font-size: 16px; }
3. עכשיו, ייתכן שתרצה להגדיל את גודל הגופן עבור מסכים גדולים יותר שיש להם מספיק נדל"ן לעשות זאת. כאן תפתח שאילתת מדיה כך: @media screen (ו- min-width: 1000px) {}
4. זהו התחביר של שאילתת מדיה. זה מתחיל עם @media להקים את שאילתת המדיה עצמה. הבא אתה מגדיר את "סוג מדיה", אשר במקרה זה הוא "מסך". הדבר חל על מסכי מחשב שולחניים, טאבלטים, טלפונים וכו '. לבסוף, אתה מסיים את שאילתת המדיה עם "תכונת המדיה". בדוגמה שלנו לעיל, כי הוא "רוחב בינוני: 1000px". משמעות הדבר היא כי שאילתה מדיה יבעט עבור מציג עם רוחב מינימלי של 1000 פיקסלים רחב.

1. לאחר אלמנטים אלה של שאילתת מדיה, אתה מוסיף פתיחת וסגירת הסבך מתולתל דומה למה היית עושה בכל כלל CSS רגיל.
2. השלב האחרון לשאילתה של מדיה הוא להוסיף את כללי CSS שברצונך להחיל לאחר שתנאי זה יתקיים. אתה מוסיף את כללי CSS אלה בין הפלחים המתולתלים שמרכיבים את שאילתת המדיה, כך: מסך @media ו- (min-width: 1000px) {body {font-size: 20px; }
3. כאשר מתקיימים התנאים של שאילתת המדיה (חלון הדפדפן הוא ברוחב 1000 פיקסלים לפחות), סגנון CSS זה ייכנס לתוקף, וישנה את גודל הגופן של האתר שלנו מ -16 הפיקסלים שיצרנו במקור לערך החדש שלנו של 20 פיקסלים.

הוספת סגנונות נוספים

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

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

הוספת עוד שאילתות מדיה

בנוסף, תוכל להוסיף עוד שאילתות מדיה עבור כל הגדלים הגדולים יותר, ולהוסיף אותם לגיליון הסגנונות שלך כך:

@media מסך ו- (min-width: 1000px) {body {font-size: 20px; } p {color: # 000000; {} @media מסך ו- (min-width: 1400px) {body {font-size: 24px; }}

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

רוחב-רוחב ומקס-רוחב

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

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

לגבי דפדפנים ישנים יותר

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

בעריכת ג'רמי ג'ירארד, 1/24/17