عند تصميم العناصر في CSS، لديك فئتان من الوحدات للاختيار من بينها: الوحدات المطلقة و الوحدات النسبية . فيما يلي تفصيل لكل واحد منهم ومدى اختلافهم:

1. الوحدات المطلقة

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

الوحدات المطلقة المشتركة:

• px (بكسل): البكسل عبارة عن مربع صغير على الشاشة. إنها الوحدة الأكثر استخدامًا للتخطيطات الثابتة.

  • مثال:

  h1 {
    font-size: 24px;
  }
  

• pt (نقاط): تستخدم عادةً في الوسائط المطبوعة، 1pt يساوي 1/72 من البوصة.

• سم (سم) و بوصة (بوصة): نادرًا ما تستخدم في تصميم الويب، وتعتمد هذه الوحدات على الأبعاد المادية.

مزايا الوحدات المطلقة:

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

العيوب:

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

2. الوحدات النسبية

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

الوحدات النسبية المشتركة:

• em: نسبة إلى حجم خط العنصر المستخدم فيه. إذا كان حجم خط العنصر الأصلي 16 بكسل، فإن 1em يساوي 16 بكسل. إذا تغير حجم العنصر الأصلي، فسيتغير الحجم أيضًا.

  • مثال:

  p {
    font-size: 1.5em; /* 1.5 times the font size of the parent */
  }
  

• rem (جذر em): نسبة إلى حجم الخط لعنصر الجذر (عادةً عنصر ). وهذا يجعلها أكثر قابلية للتنبؤ مقارنة بـ em.

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

• مثال:
  

  p {
    font-size: 2rem; /* 2 times the root font size */
  }
  

  • % (نسبة مئوية): نسبة إلى حجم العنصر الأصلي. على سبيل المثال، width: 50% يجعل العنصر 50% عرض الحاوية الأصلية.

• مثال:
  

  div {
    width: 75%; /* 75% of the parent's width */
  }
  

  • vw (عرض إطار العرض) و vh (ارتفاع إطار العرض): هذه الوحدات مرتبطة بإطار عرض المتصفح. 1vw يمثل 1% من عرض إطار العرض، و1vh يمثل 1% من ارتفاع إطار العرض.

• مثال:
  

  div {
    width: 50vw; /* 50% of the viewport's width */
  }
  

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

• التصميم سريع الاستجابة: يتم قياس الوحدات النسبية تلقائيًا بناءً على حجم الشاشة أو حجم الخط أو أبعاد الحاوية، مما يجعل تصميمك أكثر مرونة.
• أسهل في الصيانة: يمكن أن يؤدي تغيير حجم خط العنصر الجذر (باستخدام rem) إلى توسيع نطاق تصميمك بالكامل.

العيوب:

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

متى يتم استخدام الوحدات المطلقة مقابل الوحدات النسبية

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

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

This is 24px text
This is 1.5rem text (24px based on root size)

في هذا المثال:

• سيظل حجم الخط المطلق (24 بكسل) كما هو دائمًا.
• سيتم ضبط حجم الخط النسبي (1.5rem) بناءً على حجم الخط الجذر (16 بكسل)، مما يؤدي إلى 24 بكسل.

خاتمة:

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