מה פירוש „מובייל תחילה“

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 6 מתוך 35.

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

התחילו בכתיבת סגנונות למכשירים ניידים:

body {
  font-size: 16px;
  padding: 10px;
}

לאחר מכן השתמש בשאילתות מדיה כדי להתאים את העיצוב שלך למסכים גדולים יותר:

/* סגנונות למכשירים שרוחבם גדול מ-768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

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

אתגר

קל

ניתן לך HTML עם תפריט ניווט פשוט. המשימה שלך היא לעצב אותו באמצעות גישת mobile-first.

1. קודם סגנונות למכשירים ניידים

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

2. סגנונות למסכים גדולים יותר

שאילתת מדיה עבור מסכים ברוחב min-width: 768px כבר מסופקת.
בתוכה, שנה את פריסת התפריט לאופקית באמצעות display: flex עבור .menu.
התאם את המרווחים בין פריטי התפריט כך שיתאימו לתמונת הדוגמה שלהלן.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>