وثائق CSS قابلة للتشغيل: الوحدات rem وem

Q: ما الفرق بين rem وem؟

rem نسبية إلى حجم خط العنصر الجذر ( )، فتكون 1.5rem بالحجم نفسه في كل مكان في الصفحة. أما em فنسبية إلى حجم خط العنصر نفسه (وفي font-size، إلى حجم خط الأب)، فتتضاعف حين تتداخل العناصر.

Q: هل أستخدم rem أم px لحجم الخط؟

استخدم rem لأحجام الخطوط. فهي تحترم إعداد حجم الخط الافتراضي لدى القارئ في المتصفح، وهو ما تتجاهله px. تكبير المتصفح يغيّر الاثنتين، لكن ليس كل القراء يستخدمون التكبير.

Q: متى أستخدم em بدل rem؟

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

Q: ما الفرق بين 100vh و100dvh؟

في متصفحات الهاتف تكون 100vh هي الارتفاع مع إخفاء شريط العنوان، فيكون القسم ذو 100vh أطول من الشاشة المرئية ما دام الشريط ظاهرًا. أما 100dvh (ارتفاع نافذة العرض الديناميكي) فتتبع الشريط حين يظهر ويختفي، و100svh هي دائمًا الارتفاع الأصغر.

الفرق بين rem وem في مثال متداخل واحد

rem نسبية إلى حجم خط الجذر (العنصر <html>، 16px افتراضيًا). وem نسبية إلى حجم الخط الحالي، وهو في font-size حجم خط الأب. ضع الفئة نفسها متداخلة ثلاث مرات فيظهر الفرق:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rem vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .em  { font-size: 1.25em;  border-inline-start: 4px solid #f59e0b; padding-inline-start: 8px; }
    .rem { font-size: 1.25rem; border-inline-start: 4px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">em <div class="em">em <div class="em">em</div></div></div>
  <div class="rem">rem <div class="rem">rem <div class="rem">rem</div></div></div>
  <p id="out"></p>
  <script>
    const sizes = (cls) => [...document.querySelectorAll('.' + cls)].map((el) => getComputedStyle(el).fontSize).join(', ');
    document.getElementById('out').textContent = 'em: ' + sizes('em') + '  |  rem: ' + sizes('rem');
  </script>
</body>
</html>

الأحجام المطبوعة هي ما حسبه المتصفح. كل 1.25em تضرب حجم أبيها: 20px، ثم 25px، ثم 31.25px. وكل 1.25rem لا تنظر إلا إلى الجذر: 20px، و20px، و20px. هذا التضاعف هو سبب خروج أحجام خطوط em عن السيطرة في القوائم المتداخلة، وسبب ضبط معظم المواقع أحجام الخطوط بـ rem.

نسبةً إلى ماذا تُحسب كل وحدة

الوحدة	نسبةً إلى	الوحدة الواحدة افتراضيًا
`px`	لا شيء (بكسل CSS)	1px
`rem`	حجم خط العنصر الجذر (`html`)	16px
`em`	حجم خط العنصر؛ وفي `font-size` نفسها، حجم خط الأب	16px في المستوى الأعلى
`%`	تعتمد على الخاصية (راجع أدناه)
`vw` / `vh`	1% من عرض / ارتفاع نافذة العرض
`dvh`، `svh`، `lvh`	1% من ارتفاع نافذة العرض الديناميكي أو الصغير أو الكبير
`vmin` / `vmax`	1% من الضلع الأصغر / الأكبر لنافذة العرض
`ch`	عرض المحرف «0» في الخط الحالي	نحو نصف em
`ex`	ارتفاع الحرف x في الخط الحالي	نحو نصف em

بكسل CSS ليس بكسل الجهاز: على هاتف بشاشة 3x يكون عرض 1px ثلاثة بكسلات من بكسلات الجهاز. يبقى بالحجم البصري نفسه تقريبًا عبر الشاشات، ولهذا تبقى px مناسبة للحدود والظلال.

em للمسافات التي تتغير مع النص

em ليست لأحجام الخطوط فقط. على padding أو margin أو width أو border-radius تعني «مضروبًا في حجم خط هذا العنصر». وهذا يجعل فئة زر واحدة تعمل بأي حجم:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 0.5em 1em;   /* scales with this button's own font size */
      border-radius: 0.4em;
      border: 0;
      background: #2563eb;
      color: white;
      margin: 4px;
    }
    .small { font-size: 0.75rem; }
    .large { font-size: 1.5rem; }
  </style>
</head>
<body>
  <button class="btn small">Small</button>
  <button class="btn">Normal</button>
  <button class="btn large">Large</button>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.btn')]
      .map((b) => b.textContent + ': font ' + getComputedStyle(b).fontSize + ', padding ' + getComputedStyle(b).paddingTop + ' ' + getComputedStyle(b).paddingLeft)
      .join('  |  ');
  </script>
</body>
</html>

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

لاحظ أن الأزرار لا ترث حجم خط الصفحة افتراضيًا (تعطي المتصفحات عناصر التحكم في النماذج حجمها الخاص)، لذلك حجم الزر الأوسط هنا 13.33px في Chrome لا 16px. أضف font: inherit إلى الأزرار وحقول الإدخال حين تريدها أن تطابق الصفحة.

النسب المئوية: تعتمد على الخاصية

ليس لـ % معنى واحد. كل خاصية تحدد نسبةً إلى ماذا تُحسب:

الخاصية	`%` نسبةً إلى
`width`، `max-width`، `left`، `right`	عرض الأب (الكتلة الحاوية)
`height`، `top`، `bottom`	ارتفاع الأب، وفقط إن كان للأب ارتفاع مضبوط
`padding`، `margin` (الجوانب الأربعة)	عرض الأب
`font-size`	حجم خط الأب (`150%` = `1.5em`)
`line-height`	حجم خط العنصر نفسه
`transform: translate()`	حجم العنصر نفسه

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent { width: 400px; background: #e5e7eb; padding: 8px 0; }
    .child { width: 50%; height: 50%; padding-top: 5%; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c">child</div></div>
  <p id="out"></p>
  <script>
    const s = getComputedStyle(document.getElementById('c'));
    const r = document.getElementById('c').getBoundingClientRect();
    document.getElementById('out').textContent =
      'width ' + s.width + ', padding-top ' + s.paddingTop + ', rendered height ' + Math.round(r.height) + 'px';
  </script>
</body>
</html>

width: 50% تساوي 200px، نصف عرض الأب. وpadding-top: 5% تساوي 20px: 5% من عرض الأب لا ارتفاعه. وheight: 50% لا تفعل شيئًا، لأن الأب بلا ارتفاع مضبوط، فيكون الابن بارتفاع نصه مع ذلك الحشو فقط. تشرح صفحة width وheight هذه القاعدة بالتفصيل.

vw وvh وشريط العنوان في الهاتف

1vw تساوي 1% من عرض نافذة العرض، و1vh تساوي 1% من ارتفاعها. تفيدان في الأقسام بملء الشاشة وفي الأحجام المرنة (غالبًا داخل clamp()). على الهواتف لـ vh مشكلة: شريط عنوان المتصفح ينزلق ظاهرًا ومختفيًا أثناء التمرير، و100vh هي الارتفاع من دون الشريط، فيُقص أسفل القسم الرئيسي ذي height: 100vh حين يظهر الشريط. الوحدات الأحدث تحل ذلك:

الوحدة	الارتفاع المستخدم
`100vh`	نافذة العرض الكبيرة (الأشرطة مخفية) في معظم متصفحات الهاتف
`100svh`	نافذة العرض الصغيرة (الأشرطة ظاهرة): تتسع دائمًا
`100lvh`	نافذة العرض الكبيرة، صراحةً
`100dvh`	نافذة العرض الديناميكية: تتغير مع حركة الأشرطة

.hero {
  min-height: 100vh;  /* fallback for older browsers */
  min-height: 100svh; /* fits the screen even with the address bar visible */
}

ولـ vw مشكلتها الخاصة: تشمل 100vw عرض شريط التمرير العمودي حين يشغل الشريط مساحة (كما في Windows)، فقد تكون width: 100vw أعرض من الصفحة وتضيف شريط تمرير أفقيًا. استخدم width: 100% لمعنى «العرض الكامل للأب».

ch لطول سطر مريح للقراءة

ch هي عرض المحرف «0»، لذلك تحد max-width: 65ch الفقرة بنحو 65 محرفًا في السطر، وهو طول قراءة مريح، بأي حجم خط:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ch</title>
  <style>
    body { font-family: Georgia, serif; }
    p { max-width: 40ch; background: #f3f4f6; padding: 8px; }
    .big { font-size: 1.4rem; }
  </style>
</head>
<body>
  <p>This paragraph is limited to 40ch, about forty characters per line, however wide the page is.</p>
  <p class="big">At a bigger font size the box widens with the text, so each line still holds about forty characters.</p>
</body>
</html>

أي وحدة تستخدم

لـ	استخدم	السبب
أحجام الخطوط	`rem`	ثابتة في كل مكان، وتحترم إعداد حجم الخط لدى القارئ
الحشو والفجوات في المكونات	`rem` أو `em`	`em` حين يجب أن تكبر مع نص المكوّن نفسه
الحدود والخطوط الرفيعة والظلال	`px`	يجب أن تبقى رفيعة بأي حجم خط
عروض التخطيط	`%` و`fr` و`max-width` بـ `rem` أو `ch`	تتبع الحاوية وتحد طول السطر
الأقسام بملء الشاشة	`svh` / `dvh` (مع `vh` احتياطية)	تعالج أشرطة العنوان في الهاتف
الخطوط المرنة	`clamp()` تمزج `rem` و`vw`	تكبر مع الشاشة ضمن حدود

لماذا تحترم rem القراء ولا تحترمهم px

للمتصفحات إعداد لحجم الخط الافتراضي، يستخدمه من يحتاجون إلى نص أكبر. يغيّر هذا الإعداد حجم خط الجذر، فيكبر معه كل ما هو بـ rem وem. أما font-size: 14px فتبقى 14px مهما اختار القارئ. تكبير المتصفح يغيّر px أيضًا، لكن إعداد حجم الخط هو الذي يعتمد عليه كثير من القراء. هذا هو السبب الرئيسي لضبط أحجام الخطوط بـ rem.

تضبط بعض المواقع html { font-size: 62.5%; } كي تساوي 1rem قيمة 10px ويسهل الحساب. ما زال هذا يحترم إعداد القارئ (62.5% مما اختاره)، لكن تذكّر أن تضبط font-size مقروءة على body، وإلا فسيظهر كل عنصر بلا حجم خاص بنص حجمه 10px.

أخطاء شائعة

أحجام خطوط بـ em في عناصر متداخلة. تتضاعف في كل مستوى. استخدم rem لأحجام الخطوط.
height: 50% لا تفعل شيئًا. يحتاج الأب إلى ارتفاع مضبوط كي يعمل الارتفاع بالنسبة المئوية.
توقع أن تتبع padding-top: 10% ارتفاع الأب. النسب المئوية للحشو والهامش العموديين تستخدم عرض الأب.
width: 100vw تسبب شريط تمرير أفقيًا. تشمل شريط التمرير. استخدم 100%.
height: 100vh مقصوصة على الهواتف. استخدم 100svh أو 100dvh.
ضبط html { font-size: 12px }. قيمة px على الجذر تتجاوز إعداد حجم الخط لدى القارئ للصفحة كلها. اترك الجذر كما هو أو استخدم نسبة مئوية.

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

ما الفرق بين rem وem؟

rem نسبية إلى حجم خط العنصر الجذر (<html>)، فتكون 1.5rem بالحجم نفسه في كل مكان في الصفحة. أما em فنسبية إلى حجم خط العنصر نفسه (وفي font-size، إلى حجم خط الأب)، فتتضاعف حين تتداخل العناصر.

كم بكسلًا تساوي 1rem؟

16px افتراضيًا، لأن المتصفحات تضبط حجم خط الجذر على 16px. إن رفع المستخدم حجم الخط الافتراضي في إعدادات متصفحه، أو ضبطت أنت html { font-size: ... }، تتغير 1rem معه.

هل أستخدم rem أم px لحجم الخط؟

استخدم rem لأحجام الخطوط. فهي تحترم إعداد حجم الخط الافتراضي لدى القارئ في المتصفح، وهو ما تتجاهله px. تكبير المتصفح يغيّر الاثنتين، لكن ليس كل القراء يستخدمون التكبير.

متى أستخدم em بدل rem؟

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

ما الفرق بين 100vh و100dvh؟

في متصفحات الهاتف تكون 100vh هي الارتفاع مع إخفاء شريط العنوان، فيكون القسم ذو 100vh أطول من الشاشة المرئية ما دام الشريط ظاهرًا. أما 100dvh (ارتفاع نافذة العرض الديناميكي) فتتبع الشريط حين يظهر ويختفي، و100svh هي دائمًا الارتفاع الأصغر.

مفاهيم ذات صلة

الوحدات rem وem وpx في CSS: النسب المئوية وvw وvh