טיפוגרפיה למובייל תחילה

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

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

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

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

/* סגנונות בגישת מובייל תחילה */
body {
  font-size: 16px; /* גודל בסיסי למובייל */
}

h1 {
  font-size: 1.5rem;
}

שימו לב ליחידת rem שבה נעשה שימוש עבור h1. rem הוא קיצור של root em. היא יחסית לגודל הגופן של body בשורש. לכן, אם ל-body יש font-size: 16px, אז 1.5rem שווה ל-24px. השימוש ב-rem מקל על שינוי קנה המידה של כל הטקסט באופן עקבי, באמצעות שינוי גודל הבסיס בלבד.

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

/* מסכים גדולים יותר */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

אתגר

קל

המשימה שלך:

הגדר את גודל הגופן של הכותרת <h1> ל־24px במכשירים ניידים.
הגדר את גודל הגופן של הפסקה <p> ל־16px במכשירים ניידים.
צור שאילתת מדיה למסכים שרוחבם גדול מ־768px, אשר:
- מגדילה את גודל הגופן של הכותרת <h1> ל־36px.
- מגדילה את גודל הגופן של הפסקה ל־20px.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Typography</title>
  <style>
    /* ===== Mobile-First Styles ===== */
    :root {
      --base-font-size: 16px; 
    }

    body {
      font-size: var(--base-font-size);
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.5;
      background-color: #f0f8ff;
      color: #333;
    }

    header {
      background: url('https://upload.wikimedia.org/wikipedia/commons/a/af/Female_polar_bear_%28Ursus_maritimus%29_with_cub%2C_Svalbard.jpg')
                  center/cover no-repeat;
      color: white;
      text-align: center;
      padding: 50px 20px;
    }

    header h1 {
      margin: 0;
    }

    .subtitle {
      margin-top: 10px;
      font-size: 1rem;
      opacity: 0.9;
    }

    main {
      padding: 20px;
    }

    h2 {
      color: #2c6e91;
      font-size: 1.25rem;
    }

    ul {
      padding-left: 20px;
    }

    li {
      margin-bottom: 10px;
    }

    footer {
      background-color: #2c6e91;
      color: white;
      text-align: center;
      padding: 15px;
      font-size: 0.9rem;
    }

    /* ===== Larger Screens ===== */

  </style>
</head>
<body>
  <header>
    <h1>Polar Bears – Kings of the Arctic</h1>
    <p class="subtitle">Discover the life of the world's largest land carnivore</p>
  </header>

  <main>
    <section>
      <h2>About Polar Bears</h2>
      <p>
        Polar bears are magnificent animals that live in the Arctic region. 
        They are excellent swimmers, using their large paws to paddle through icy waters 
        in search of seals, their main source of food. These bears have thick layers of 
        fat and dense fur to keep them warm in extreme cold.
      </p>
    </section>

    <section>
      <h2>Interesting Facts</h2>
      <ul>
        <li>Polar bears can weigh up to 700 kg (1,500 lbs).</li>
        <li>They have black skin under their white fur to absorb heat.</li>
        <li>Polar bears can swim for days without resting.</li>
        <li>They are listed as vulnerable due to climate change.</li>
      </ul>
    </section>

    <section>
      <h2>Protecting Polar Bears</h2>
      <p>
        Climate change and melting sea ice threaten polar bear habitats. 
        Protecting these amazing creatures requires global efforts to 
        reduce greenhouse gas emissions and preserve their Arctic environment.
      </p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Arctic Wildlife. All rights reserved.</p>
  </footer>
</body>
</html>