CSS - Units الوحدات

CSS - الوحدات (Units)

🔸 في CSS، يتم استخدام وحدات لقياس الأحجام، الأطوال، المسافات، والخطوط، وهي تنقسم إلى نوعين رئيسيين:

• الوحدات المطلقة (Absolute Units): دائمًا لها نفس القيمة الثابتة.
• الوحدات النسبية (Relative Units): تعتمد على عنصر آخر مثل حجم الخط الأساسي أو أبعاد العنصر الأب.

---

🔹 الوحدات المطلقة (Absolute Units)

تشمل:

• cm - سنتيمتر
• mm - مليمتر
• in - إنش (1in = 2.54cm)
• px - بكسل (الافتراضي في الشاشات)
• pt - نقطة (1pt = 1/72 إنش)
• pc - بيكا (1pc = 12pt)

div {
  width: 200px;
  height: 50mm;
}

---

🔹 الوحدات النسبية (Relative Units)

تشمل:

• % - نسبة مئوية من العنصر الأب
• em - نسبة إلى حجم الخط الحالي
• rem - نسبة إلى حجم خط العنصر html
• vw - نسبة من عرض نافذة المتصفح (viewport width)
• vh - نسبة من ارتفاع نافذة المتصفح (viewport height)
• vmin - الأصغر بين vw وvh
• vmax - الأكبر بين vw وvh
• ch - عرض الحرف "0" في الخط المستخدم
• ex - ارتفاع الحرف "x" في الخط المستخدم

div {
  font-size: 1.5em;
  width: 50%;
  height: 30vh;
}

---

📌 ملاحظات هامة

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