وحدات CSS والفروقات بينها

 ما هي وحدات CSS ؟

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

 

هل هناك وحدات غير البيكسل px والنسب المئوية % ؟

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

 

البيكسل (px)

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

 

 المميزات:

• دقيقة وثابتة (1px دائمًا يساوي نقطة واحدة على الشاشة)
• سهلة الفهم والاستخدام
• مناسبة للعناصر التي يجب أن تبقى بنفس الحجم بغض النظر عن الظروف

العيوب:

• غير مرنة للتصميم المتجاوب
• لا تأخذ في الاعتبار إعدادات حجم الخط في المتصفح
• قد تظهر صغيرة جدًا أو كبيرة جدًا على شاشات عالية الدقة

طريقة الإستخدام:

.example {
width:200px;
font-size:14px
}

وحدة em

 هي وحدة نسبية تتأثر بالحجم المباشر للأب , يعني لو العنصر الأب وليكن له خط 16px ثم جعلت الإبن حجم الخط 1em اذن سيكون كل 1em = 16px 

طيب قمت بتغيير حجم خط الأب الى 20px تلقائياً سيصبح حجم خط الإبن 20px وهذا ليس فقط في أحجام الخطوط بل في الهوامش والمسافات التي ستخدمها في العناصر ستتأثر دائماً بحجم الأب

 

المميزات:

• مرنة وتتكيف مع إعدادات المستخدم
• ممتازة لضبط أحجام الخطوط والمسافات النسبية
• تسمح بالتحجيم النسبي للعناصر

العيوب:

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

 

طريقة الإستخدام :

/*عنصر الأب*/
.parent {
  font-size: 20px;
}

/*عنصر الإبن*/
.child {
  font-size: 1.5em; /* سيساوي 30px (1.5 × 20px) */
}

 

وحدة rem

 هي مشابهة لوحدة em لكن تم اضافة حرف r لها اختصار root أو الجذر وهو أعلى عنصر في الصفحة

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

 

المميزات:

• تجمع بين مرونة em وثبات px
• أسهل في التوقع والتحكم لأنها تعتمد على عنصر واحد فقط
• مثالية للتصميم المتجاوب
• تحترم تفضيلات المستخدم عند ضبط حجم الخط الأساسي

العيوب:

• قد لا تكون مناسبة للعناصر التي تحتاج إلى أن تكون نسبية للعنصر الأب
• دعمها في المتصفحات القديمة محدود (لكن ليس مشكلة في المتصفحات الحديثة) 

 

طريقة الإستخدام:

/*عنصر الجذر*/
.html {
  font-size: 20px;
}

/*عنصر الأب*/
.parent {
font-size:60px
}

/*عنصر الإبن لاحظ أخذ صفات الجذر وليس الأب*/
.child {
  font-size: 1.5rem; /* سيساوي 30px (1.5 × 20px) */
}

 وحدتي vh , wh

 هم وحدتين مترابطتين تتعلق تلك الوحدات بما هو ظاهر من الشاشة وليس كامل حجم الصفحة بل الظاهر عند الدخول

vh وهي متعلقة بالإرتفاع 

wh متعلقة بالعرض

 

المميزات:

• ممتازة لإنشاء عناصر تتكيف مع حجم الشاشة
• مفيدة للعناصر التي يجب أن تملأ الشاشة (مثل الأقسام الكاملة)
• لا تتأثر بحجم الخط أو العناصر الأب

العيوب:

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

 

طريقة الإستخدام:

.header {
  height: 100vh; /* سيأخذ 100% من ارتفاع الشاشة */
  width: 80vw;   /* سيأخذ 80% من عرض الشاشة */
}

 النسبة المئوية %

وحدة نسبية تعتمد على نسبة من حجم العنصر الأب.

المميزات:

• مرنة وتتكيف مع الحاوية الأب
• مثالية للتصميمات السائلة والمتجاوبة
• مفهومة بشكل شائع بين المطورين

العيوب:

• تعتمد كليًا على العنصر الأب مما قد يسبب مشاكل إذا لم يكن حجم الأب محددًا
• قد تتصرف بشكل غير متوقع مع بعض الخصائص (مثل padding و margin)
• ليست مناسبة دائمًا لتحديد أحجام الخطوط

جدول مقارنة بسيط يلخص لك الفروقات بينهم

 

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

 

أفضل الممارسات 

1. استخدم rem لأحجام الخطوط والتباعد الرأسي لضبط قابلية التوسيع.
2. استخدم % للعناصر التي تحتاج إلى التكيف مع الحاوية الأب.
3. استخدم vw/vh للعناصر التي يجب أن تتكيف مع حجم الشاشة.
4. استخدم px للعناصر التي يجب أن تبقى بنفس الحجم دائمًا (مثل الحدود).
5. تجنب استخدام em للعناصر المتداخلة العميقة إلا إذا كنت تريد تأثيرًا تراكميًا. 

 

هل هذه هي كل الوحدات المتاحة؟

 لا طبعا هنا وحدات اخرى وحدة السنتيميتر cm والمليميتر mm والإنش in وغيرها قمنا بشرح فقط الأهم والأكثر استخداماً والتي ستصادفهم غالباً , والتي ستحتاجها فعلياً كمستخدم لبلوجر أو شخص يؤسس نفسه في لغة CSS