התחביר של Media Queries

Media Queries ב - CSS3 היא סוג של שאילתה המקבלת פרמטר אחד או יותר שתפקידם להגדיר מאפיינים מסוימים. תפקיד השאילתה לבדוק האם המכשיר שבאמצעותו גולשים לדף ששואל את השאילתה עונה על הפרמטרים שהועברו לשאילתה כפרמטרים. התשובה לשאילתה מסוג Media Queries תהיה תמיד שקר או אמת.

פשר להשתמש ב - Media Queries בשלוש דרכים. כולם מאפשרות בסופו של דבר לממש קוד CSS כזה או אחר על דף HTML או קטע מדף HTML. הדרך הראשונה היא לקרוא לגיליון CSS חיצוני באמצעות התג <link>. נעשה זאת כך:

<link href="file" rel="stylesheet" media="logic media and (expression)">

הדרך השניה לקריאה מותנית לגיליון CSS חיצוני היא באמצעות הפקודה import@. תחביר פקודה זו הוא:

@import url('css file') logic media and (expression);

הדרך השלישית היא להשתמש ב - Media Queries בתוך גיליון CSS או בתוך קוד CSS הנמצא על דף HTML. תחביר פקודה זו הוא:

@media logic media and (expression) { CSS Code ... }

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

בשלב ראשון ננסה להבין מה עומד מאחורי הביטוי logic (באדום בדוגמת התחביר למעלה) . במקום זה יכולים להיות אחד משני ביטויים:

@media only media and (expression) { CSS Code ... }
@media not media and (expression) { CSS Code ... }

נשתמש ב - only במקרים שבהם נרצה "להחביא" את ה - Media Query שלנו מדפדפנים ישנים שאינם תומכים בשאילתות מסוג זה. דפדפנים שתומכים ב - Media Queries יתעלמו מההוראה "only".

הביטוי not ישמש אותנו לצורך שלילת התנאי שבהמשך השאילתה. כך למשל אם התנאי בשאילתה הוא שרוחב המסך יהיה 480px אזי הוספת הביטוי not לפני התנאי פירושה שהתנאי יהיה בעל ערך אמת עבור כל מכשיר שרוחב המסך שלו אינו 480px.

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

דוגמאות קוד לביטויים שאותם ניתן להכניס ל - Media Queries

ביטוי המבטא מאפיין מדיה כלשהו מורכב משני חלקים:

@media media and (feature:value) { CSS Code ... }

חלק ה - feature (באדום למעלה) מציין את סוג התכונה שאנו מחפשים, למשל רוחב מסך, גובה מסך או אוריינטציה של מסך ועוד. חלק ה - value הוא החלק שלתוכו נכנס את הערך של ה - feature. למשל רוחב מסך השווה ל - 800px. הבה נעיין בעוד מספר דוגמאות קוד:

@media screen and (max-width:480px) { CSS Code ... }
@media screen and (min-height:640px) { CSS Code ... }

הכלל הראשון יתפוס לגבי מכשירים שגודל המסך שלהם אינו עולה על 480px ואילו הכלל השני יתפוס לגבי מכשירים שגובה המסך המינימלי שלהם הוא לפחות 640px.

בדוגמה הבאה גודל הטקסט בתוך אלמנט מסוג <h1> ישתנה בהתאם לגודל מסך המכשיר שבו צופים באתר:

@media screen and (max-width: 480px) {
h1 {
    font-size: 50%
}
}

@media screen and (min-width: 960px) {
h1 {
    font-size: 100%
}
}


בדוגמה האחרונה גודל הפונט בתוך אלמנט מסוג <h1> במכשירים שרוחב המסך שלהם אינו עולה על 480 פיקסלים יהיה %50 ואילו גודלו במכשירים שרוחב המסך שלהם אינו פחות מ - 960 פיקסלים יהיה %100.

סיכום

במדריך זה למדנו על שלוש דרכים שונות לכתוב Media Queries. הרחבנו ובחנו את התחביר של שלושת הדרכים תוך התמקדות מיוחדת בתחביר הפקודה media@.

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

 

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש