CSS Academy · درس

الوحدات النسبية: em وrem

غيّر حجم العناصر نسبةً إلى أحجام خطوط العنصر الأب أو الجذر باستخدام وحدتي em وrem.

الوحدات النسبية: em وrem درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما الوحدات النسبية؟

تتدرج الوحدات النسبية استنادًا إلى قياس آخر، عادةً حجم خط عنصر أو العنصر الجذر. وهي تتيح تصميمات قابلة للتوسع ومتجاوبة تحترم إعدادات المستخدم.

em — نسبةً إلى حجم خط العنصر الأب

تكون em نسبيةً إلى حجم خط العنصر الحالي عند استخدامها مع font-size نفسه، أو إلى العنصر الأب عند استخدامها مع الخصائص الأخرى. وقد يؤدي ذلك إلى تراكم القيم.

<div class="parent">
    Parent (20px)
    <div class="child">
      Child (1.5em = 30px)
      <div class="grandchild">Grandchild (1.5em = 45px!)</div>
    </div>
  </div>

استخدام em للمسافات

عند استخدام em مع padding أو margin أو border-radius، تكون نسبتها إلى حجم خط العنصر نفسه. وينشئ ذلك مكوّنات تتدرج أبعادها تناسبيًا.

<button class="button">Padded Button</button>

rem — نسبةً إلى حجم خط الجذر

تكون rem (root em) نسبيةً إلى حجم خط العنصر الجذر (html). ولا تتراكم قيمها مطلقًا، لذا فهي متوقعة في جميع أنحاء الصفحة.

<h1>Heading (2.5rem = 40px)</h1>
  <p>Paragraph text (1rem = 16px)</p>
  <small>Small print (0.75rem = 12px)</small>

rem وإمكانية وصول المستخدم

إذا زاد المستخدم حجم الخط الأساسي في المتصفح (مثلًا من 16px إلى 20px لتحسين القراءة)، فستتدرج وحدات rem وفقًا لذلك. أما وحدات px الثابتة فلا تتدرج. ولهذا يُوصى بشدة باستخدام rem للخطوط.

حجم خط html بالنسب المئوية

اضبط حجم خط الجذر كنسبة مئوية لاحترام إعدادات المستخدم في المتصفح:

<p>Root font-size respects the browser/user default (100%).</p>

اختيار em أو rem

إرشادات عملية:

استخدم rem لأحجام الخطوط، ورموز المسافات، وقياسات التخطيط
استخدم em للمسافات داخل المكوّن التي ينبغي أن تتدرج مع حجم خط المكوّن (مثل padding على زر)

em في استعلامات الوسائط

تستجيب استعلامات الوسائط المحددة بوحدة em لتغييرات حجم الخط في المتصفح. فعند الإعدادات الافتراضية، تعادل نقطة توقف 48em مقدار 768px، لكنها تتكيف إذا غيّر المستخدم حجم الخط الأساسي.

<div class="layout">
    <div>Column A</div>
    <div>Column B</div>
  </div>

حساب em

الصيغة: desired px / parent px = em value. إذا كان حجم العنصر الأب 16px وأردت نصًا بحجم 24px، فإن: 24/16 = 1.5em.

<h2>Heading (24px via 1.5rem)</h2>
  <p>Paragraph (18px via 1.125rem)</p>

مشكلة تراكم em

يؤدي تداخل العناصر ذات أحجام em إلى تراكم حجم الخط بطريقة ضربية. ولهذا يُفضَّل استخدام rem لحجم الخط، إذ يشير دائمًا إلى الجذر ويمنع تراكم القيم.

ch — عرض الحرف

تساوي وحدة ch عرض الحرف "0" في الخط الحالي. وهي مفيدة لتقييد حاويات النص بطول أسطر يسهل قراءته:

<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>

تحقّق سريع

لدى زر font-size: 1.25rem وpadding: 0.5em. إذا كان حجم خط الجذر 16px، فما قيمة padding بالبكسلات؟

مراجعة

تتدرج em نسبةً إلى حجم خط العنصر الحالي (أو العنصر الأب عند استخدامها مع حجم الخط نفسه)، ولذلك قد تتراكم. أما rem فتتدرج دائمًا نسبةً إلى الجذر ولا تتراكم مطلقًا. استخدم rem للخطوط والمسافات العامة، وem للمسافات الداخلية التناسبية في المكوّنات.

الأسئلة الشائعة

هل درس «الوحدات النسبية: em وrem» مجاني؟

نعم — نص درس «الوحدات النسبية: em وrem» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «الوحدات النسبية: em وrem»؟

غيّر حجم العناصر نسبةً إلى أحجام خطوط العنصر الأب أو الجذر باستخدام وحدتي em وrem. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «الوحدات النسبية: em وrem»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy