רוגוזין 4 אשדוד08-910-3080info@ocean-it.co.ilא - ה 09:00 - 18:00

עיצוב רספונסיבי ודגשים לפיתוח מובייל חלק ב' – media query

פוסט 4 מתוך 7
עיצוב ריספונסיבי

שאילתת media@:

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

להלן כמה סוגים של מההרחבות של שאילתת media@:
screen, print, all, braill, handheld, projection, tty, embossed, speech כאשר השלוש הראשונות (screen,print,all) הן הנפוצות ביותר, אנו נתמקד בעיקר בscreen.

הסינטאקס של השאילתא ייתקיים באופן הבא :

<feature>:<value>

הערך value הוא אופציונלי, (כמו לדוגמה כאשר מדברים על portrait או landscape ) לא צריך לתת ערך כי ברור שאנחנו מתכוונים landscape = true , המאפיינים איתם אנחנו יכולים להשתמש הם:

width, height, orientation, device-width, device-height, aspect-ratio, device-aspect-ratio, color, color-index ,monochrome, resolution, scan, grid

שהנפוצים ביותר יהיו width, height ו orientation.

כמה דוגמאות לשימוש בשאילתת media@ :

 

@media screen and(orientation:portrait),(max-width:768px)

@media screen and(orientation:portrait)and(max-width:768px)

שני הביטויים זהים – סימן פסיק מייצג את הביטוי הלוגי and, והשאילתא תקבל פסוק אמת במצב בו האורינטציה של המסך תיהיה לאורך, עם רוחב מקסימלי של 768px (ניתן להשתמש בשאילתא אך ורק ביחידות קבועות כמו פיקסלים ולא ביחידות יחסיות כמו em או אחוזים).

אז איפה אפשר להשתמש בשאילתא?

  • בתור תכונה של תגית link שקוראת לקובץ CSS כולו במידה ומקבלת פסוק אמת.
  • אחרי הצהרת import@ בתוך הקובץ CSS שיקרא כולו במידה ומקבלת פסוק אמת.
  • אפשר לשים בכל מקום בתוך קובץ CSS בעזרת ({})media@ ובתוך הסוגריים המסולסלות נכתוב את העיצוב שאנחנו רוצים שיתקבל במידה והשאילתא תיתן פסוק אמת.
  • בתוך קוד של JavaScript.

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

הנה כמה דוגמאות לצורות השונות בהן ניתן לשים את השאילתא:

HTML: 

<link href="style.css" type="text/css" rel="stylesheet" media="screen and (max-width:768px)"/>

CSS: 

@import('mobile-app.css') screen and (max-width:480px)

@media screen and (max-width:768px)

JavaScript: 

if (window.styleMedia.matchMedium("screen and (max-width:768px)"){
  }

ניתן לחלק את העיצוב למספר רזולוציות עיקריות שנפוצות כיום כמו למשל: קטנים מ480px , בין 480px ל 768px, וגדולים מ768px במקרה של 3 רזולוציות, או 320<480<768אך מצד שני נצטרך גם לעבוד יותר קשה בהתאמת האתר לכל הרזולוציות שבחרנו.

חלוקת מסכים ל3 רזולוציות

חלוקת מסכים ל3 רזולוציות

עיצוב בעזרת ערכים יחסיים:

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

דרך מאוד נוחה לתת ערכים יחסיים היא להשתמש באחוזים עבור תכונות כמו margin,width,height וכד' וכך הערכים ישתנו בהתאם לגודל המסך שבו נצפה ועיצוב יהיה יותר כללי.
עוד יחידת מידה יחסית שנוחה לעבודה היא em , היחידה em מתייחסת לגודל הפונט באלמנט בו הוא נמצא, כך שבמקום לתת גודל בפיקסלים אנו יכולים לתת ביחידות em ,והגודל יוכל להשתנות באופן יחסי, לדוגמא:

 

.element{
   font-size:20px;
   width:5em;
   height:5em;
}

כלומר כל יחידת em בדוגמא תיהיה שווה ל20px , הרוחב והאורך בדוגמא יהיו שווים ל100px.

SVG:

דבר נוסף שטוב לדעת לגבי עיצוב רספונסיבי וההתייחסות לתמונות הוא שאם אנחנו משתמשים בתמונה רגילה כמו מסוג jpg,png,gif וכד' , כאשר נרצה להקטין ולהגדיל את התמונה, התמונה תתעוות ותיראה עבורינו הרבה פחות איכותית מהתמונה המקורית, דרך טובה מאוד לטפל במקרים כאלו היא שימוש
בתמונה מסוג SVG – scalable vector graphics , אשר מבוססת על XML ומיוצגת בצורה וקטורית כך שהיא שומרת על האיכות גם כאשר מגדילים ומקטינים אותה, וכמובן היא נתמכת כיום על ידי כל הדפדפנים העיקריים (IE8 ומעלה)

SVG-logo.svg

הלוגו של SVG

 

Bitmap_VS_SVG.svg

תמונה הממחישה את ההבדל בין תמונה וקטורית לעומת תמונות רגילות כמו jpg, png ו gif

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

 

מאמר זה נכתב על ידי LuckyLuke