מהם Media Queries ולמה צריך אותם

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

נשאלת השאלה כמובן מה חדש? הלא ב - CSS2 הייתה לנו אפשרות לציין מה יהיה קוד ה - CSS הפעיל עבור סוגי מדיה ספציפיים כגון: screen או print וזאת באמצעות כלל ה -  media@:

דוגמת קוד לשימוש ב - media@

<style>
 
@media screen
    {
      div{font-size:12px;}
    }

@media print
    {
      div{font-size:13px;}
    }

@media projection
    {
      div{font-size:10px;}
    }

</style>

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

<link href="style.css" rel="stylesheet" media="screen">

אם גרסאות קודמות נתנו לנו פתרונות אז למה צריך משהו חדש?

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

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

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

 

 

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