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

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

تنسيق النصوص الموجه للأجهزة المحمولة أولاً (Mobile-First Typography) يعني البدء بأنماط النصوص التي يسهل قراءتها على الشاشات الصغيرة، ثم تعديلها للشاشات الأكبر باستخدام media queries.

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

قم بإعداد حجم الخط الأساسي للهاتف المحمول:

/* أنماط الهاتف المحمول أولاً */
body {
  font-size: 16px; /* الحجم الأساسي للهاتف المحمول */
}

h1 {
  font-size: 1.5rem;
}

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

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

/* الشاشات الأكبر */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

التحدي

سهل

مهمتك:

اجعل حجم خط العنوان <h1> هو 24px على الأجهزة المحمولة.
اجعل حجم خط الفقرة <p> هو 16px على الأجهزة المحمولة.
قم بإنشاء استعلام وسائط (media query) للشاشات التي يكون عرضها أكبر من 768px بحيث:
- يزيد حجم خط العنوان <h1> إلى 36px.
- يزيد حجم خط الفقرة إلى 20px.

ورقة مرجعية

تبدأ طباعة النصوص الموجهة للأجهزة المحمولة أولاً بأنماط نصية محسنة للشاشات الصغيرة، ثم تستخدم استعلامات الوسائط (media queries) للتكيف مع الشاشات الأكبر.

وحدات rem هي وحدات نسبية لحجم الخط font-size الجذري (المحدد في body أو html). على سبيل المثال، إذا كان body { font-size: 16px; }، فإن 1.5rem تساوي 24px. استخدام rem يحافظ على اتساق أحجام الخطوط ويسهل تغيير حجمها عبر أحجام الشاشات المختلفة.

تعيين أحجام الخطوط الأساسية للأجهزة المحمولة:

/* أنماط الأجهزة المحمولة أولاً */
body {
  font-size: 16px;
}

h1 {
  font-size: 1.5rem;
}

استخدم استعلامات الوسائط للتكيف مع الشاشات الأكبر:

/* الشاشات الأكبر */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 2rem;
  }
}

جرّب بنفسك

<!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>