الوحدات والقيم ودوال الحساب

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

وحدات CSS نوعان: مطلقة (ثابتة) ونسبية (تتغيّر حسب السياق — أفضل للتجاوب).

الوحدة المطلقة الأشهر: px

p { font-size: 16px; }

ثابتة ودقيقة، لكنها لا تتجاوب مع تفضيلات المستخدم.

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

html { font-size: 16px; }

h1 { font-size: 2rem; }      /* 32px (2 × 16) */
.box { width: 80%; }          /* 80% من الأب */
.hero { height: 100vh; }      /* كامل ارتفاع الشاشة */

🔑 القاعدة الذهبية: استخدم rem لأحجام الخطوط (تحترم تفضيلات المستخدم)، و%/vw للأبعاد المرنة، وpx للتفاصيل الدقيقة (مثل الحدود).

em مقابل rem

• em نسبةً إلى خط العنصر/الأب → قد يتراكم في العناصر المتداخلة.
• rem نسبةً إلى خط الجذر دائمًا → أكثر قابلية للتوقّع. فضّله غالبًا.

دوال الحساب

calc() — احسب مزيجًا من الوحدات

.main {
  width: calc(100% - 250px);   /* كامل العرض ناقص الشريط الجانبي */
}

min() و max()

.box {
  width: min(90%, 600px);   /* الأصغر: مرن لكن بحدّ أقصى */
  width: max(50%, 300px);   /* الأكبر: مرن لكن بحدّ أدنى */
}

clamp() — قيمة مرنة بين حدّين 🌟

مثالية للخطوط المتجاوبة دون media queries:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  /* لا يقلّ عن 1.5rem ولا يزيد عن 3rem، ومرن بينهما */
}

الأخطاء الشائعة

• ❌ استخدام px لكل شيء → تصميم غير متجاوب.
• ❌ تراكم em في عناصر متداخلة → نتائج غير متوقّعة (استخدم rem).
• ❌ نسيان المسافات في calc → calc(100%-20px) خطأ، الصحيح calc(100% - 20px).

خلاصة

أتقن الوحدات النسبية (rem للخطوط، %/vw للأبعاد)، واستخدم calc() للحسابات وclamp() للقيم المرنة بين حدّين — أدوات أساسية للتصميم المتجاوب.