شرح وحدات CSS النسبية: Em و Rem و VH و VW مع أمثلة عملية

مقدمة إلى وحدات CSS النسبية

عند تصميم واجهات ويب مرنة وقابلة للتكيف مع مختلف أحجام الشاشات، يصبح فهم وحدات CSS النسبية أمراً أساسياً. من أبرز هذه الوحدات em وrem وvw وvh، وهي أدوات فعالة تساعدك على بناء مواقع متجاوبة بدون الاعتماد المفرط على القيم الثابتة مثل px.

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

لماذا يجب تعلم الوحدات النسبية في CSS؟

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

• تسهل إنشاء تصميم Responsive متناسق.
• تقلل الحاجة إلى تعديلات كثيرة عند اختلاف أحجام الشاشات.
• تساعد في تحسين تجربة القراءة وسهولة الاستخدام.
• تجعل الصيانة والتوسع في المشروع أكثر بساطة.

وعند دمج هذه الوحدات مع media queries، يمكنك الحصول على تخطيط مرن يتدرج بسلاسة بين الهاتف والجهاز اللوحي وسطح المكتب.

الفرق بين الوحدات الثابتة والوحدات النسبية

قبل البدء، من المهم فهم الفارق الأساسي بين px والوحدات النسبية. وحدة px لا تتغير تلقائياً عند تغيير حجم النافذة، لذلك قد تبدو مناسبة في بعض الحالات الدقيقة، لكنها ليست الخيار الأفضل دائماً عند بناء واجهات مرنة.

نصيحة عملية: من الأفضل التفكير في em وrem على أنهما معاملات ضرب ترتبط بقيمة أساسية، وليس مجرد وحدات قياس تقليدية.

إعداد المشروع للتجربة والتطبيق

إذا أردت تجربة الأمثلة بنفسك، يمكنك إنشاء مشروع بسيط يتكوّن من ملفات HTML وCSS وJavaScript، ثم ربطها ببعضها داخل مجلد واحد مثل project-1. كما يُستحسن استخدام محرر مثل VS Code مع إضافات مفيدة مثل Live Server وأداة تحويل px to rem.

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

ما هي وحدة rem في CSS؟

وحدة rem تعتمد على حجم خط العنصر الجذري، أي عنصر html. القيمة الافتراضية لحجم الخط في أغلب المتصفحات هي 16px، لذلك فإن:

• 1rem = 16px
• 2rem = 32px
• 3rem = 48px

مثال عملي على 1rem

html {
  font-size: 16px;
}

.text {
  font-size: 1rem;
}

/* 1rem * 16px = 16px */

مثال عملي على 2rem

html {
  font-size: 16px;
}

.text {
  font-size: 2rem;
}

/* 2rem * 16px = 32px */

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

كيف يؤثر تغيير حجم الخط الجذري على rem؟

عندما تغيّر حجم الخط في عنصر html، فإن جميع القيم المعتمدة على rem تتغير تلقائياً.

html {
  font-size: 40px;
}

.text {
  font-size: 1rem;
}

/* 1rem * 40px = 40px */

html {
  font-size: 40px;
}

.text {
  font-size: 2rem;
}

/* 2rem * 40px = 80px */

لهذا السبب تُعد rem من أفضل الوحدات عند بناء نظام تصميم متناسق، لأنها تربط معظم الأحجام بمصدر واحد يمكن التحكم به بسهولة.

كيفية إنشاء تصميم متجاوب باستخدام وحدة rem

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

@media (max-width: 1400px) {
  html {
    font-size: 25px;
  }
}

@media (max-width: 768px) {
  html {
    font-size: 18px;
  }
}

@media (max-width: 450px) {
  html {
    font-size: 12px;
  }
}

ثم يمكن تطبيق الحجم على العنصر بهذه الصورة:

.text {
  font-size: 3rem;
}

الحسابات هنا ستكون كالتالي:

• الشاشة الكبيرة: 3rem × 25px = 75px
• الجهاز اللوحي: 3rem × 18px = 54px
• الهاتف المحمول: 3rem × 12px = 36px
• الإعداد الافتراضي: 3rem × 16px = 48px

هذا الأسلوب يمنحك تحكماً مركزياً في أبعاد النصوص والعناصر، ويُعد أكثر نظافة من تعديل كل عنصر على حدة.

ما هي وحدة em في CSS؟

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

html {
  font-size: 16px;
}

.text {
  font-size: 3em;
}

/* 3em * 16px = 48px */

مشكلة شائعة عند استخدام em

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

html {
  font-size: 16px;
}

.text {
  font-size: 3em;
  padding: 3em;
}

/*
text => 3em * 16px = 48px
padding => 3em * 48px = 144px
*/

لهذا السبب، يفضّل كثير من المطورين استخدام rem في المقاسات العامة، لأنه أوضح وأكثر قابلية للتنبؤ، خاصة في المشاريع الكبيرة أو فرق العمل المشتركة.

متى تكون em مناسبة؟

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

ما هي وحدة vw في CSS؟

الاختصار vw يعني viewport width، أي عرض نافذة العرض. كل 1vw يساوي 1% من عرض الشاشة الظاهر للمستخدم.

بالتالي، إذا كتبت 50vw فهذا يعني أن العنصر سيأخذ نصف عرض الشاشة تقريباً.

.text {
  display: none;
}

.box {
  width: 50vw;
  height: 300px;
  /* display: none; */
}

وفي الجزء الخاص بـJavaScript يمكن إظهار قيمة العرض بهذا الشكل:

// Box Width & height
box.innerHTML = "Width : " + Box_width;
// box.innerHTML = "Height : " + Box_height;

تُستخدم vw كثيراً في:

• العناوين الكبيرة المرنة.
• الأقسام التي يجب أن تتمدد أفقياً مع الشاشة.
• تصميم العناصر البصرية التي تعتمد على أبعاد الواجهة.

ما هي وحدة vh في CSS؟

الاختصار vh يعني viewport height، أي ارتفاع نافذة العرض. كل 1vh يساوي 1% من ارتفاع الشاشة المرئي.

إذا استخدمت 50vh، فهذا يعني أن العنصر سيشغل نصف ارتفاع الشاشة.

.text {
  display: none;
}

.box {
  width: 300px;
  height: 50vh;
  /* display: none; */
}

ولتحديث عرض القيمة عبر JavaScript:

// Box Width & height
// box.innerHTML = "Width : " + Box_width;
box.innerHTML = "Height : " + Box_height;

وكذلك يمكن عرض ارتفاع الشاشة نفسها:

// Screen Size (Width & height)
// size.innerHTML = "Width : " + Width + " px";
size.innerHTML = "Height : " + Height + " px";

تكون وحدة vh مناسبة بشكل خاص في:

• أقسام Hero التي تملأ الشاشة.
• تصميم الشاشات الافتتاحية.
• توزيع المساحات العمودية بشكل ديناميكي.

مقارنة سريعة بين rem وem وvw وvh

أفضل الممارسات عند استخدام الوحدات النسبية

1. استخدم rem لأحجام الخطوط والهوامش والمسافات الأساسية.
2. استخدم em بحذر داخل المكونات التي تعتمد على سياق داخلي محدد.
3. استخدم vw وvh للعناصر المرتبطة مباشرة بأبعاد الشاشة.
4. ادمج الوحدات النسبية مع media queries لتحقيق أفضل تجاوب.
5. اختبر التصميم على أكثر من جهاز لتجنب النتائج غير المتوقعة.

الخلاصة التقنية

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