تنسيق النصوص للهاتف المحمول أولاً

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 7 من 35.

تعني Mobile-First Typography البدء باستخدام نمط text تكون فيه styles سهلة القراءة على الشاشات الصغيرة، ثم تعديلها للشاشات الأكبر باستخدام media queries.

نحن نستخدمه لأن مستخدمي الهواتف المحمولة بحاجة إلى خطوط واضحة ومقروءة تعمل بشكل جيد على الشاشات الصغيرة. إذا كان النص صغيرًا جدًا، يصبح من الصعب قراءته، وإذا كان كبيرًا جدًا على أجهزة أجهزة المكتب، فقد يبدو غير متناسق.

أنشئ حجم الخط الأساسي للهاتف المحمول (mobile):

/* Mobile-first styles */
body {
  font-size: 16px; /* base size for mobile */
}

h1 {
  font-size: 1.5rem;
}

لاحظ وحدة rem المستخدمة مع h1. تعني كلمة rem اختصارًا لـ root em — وهي نسبية إلى حجم font الخاص بالعنصر الأساسي body. لذلك إذا كان body يملك font-size: 16px، فإن 1.5rem يساوي 24px. استخدام rem يجعل من السهل تغيير حجم جميع النصوص لديك بشكل متناسق بمجرد تغيير size الأساسي فقط.

ثم استخدم استعلامات الوسائط (media queries) للضبط للشاشات الكبر:

/* Larger screens */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

التحدي

سهل

مهمتك:

اجعل حجم خط العنوان <h1> بمقدار 24px على الهواتف المحمولة.
اجعل حجم خط الفقرة <p> بمقدار 16px على الهواتف المحمولة.
أنشئ استعلام وسائط (media query) للشاشات الأعرض من 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>