انتقل إلى محتوى الدرس

Absolute Versus Relative Units مقارنة الوحدات المطلقة والنسبية

أتقن وحدات القياس المطلقة والنسبية في CSS مثل px و rem و em و ch والنسب المئوية ووحدتي الجوال الحديثتين svh و dvh، وتعلّم فحص قيمها المحسوبة في المتصفح.
2 صفوف تعليمية
لغة CSS
2 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

كل قياس رقمي في لغة CSS — سواء لضبط حجم الخط بـ font-size أو لضبط عرض العنصر width وارتفاعه height — يتكون من رقم متبوع بوحدة قياس ملتصقة به مباشرةً من دون أي مسافة فاصلة مثل 24px أو 50% (ولا يجوز حذف الوحدة إلا مع الرقم 0). ويحدد نوع الوحدة ما إذا كان تصميمك جامداً أم مرناً يتكيف بسلاسة مع الهواتف والشاشات العريضة:

  • الوحدات المطلقة (px و cm و mm و in و pt): قياسات ثابتة لا تتغير بتغير أبعاد العنصر الأب أو إعدادات تكبير الخط الافتراضي في متصفح الزائر.
  • الوحدات النسبية (rem و em و ch و % و vw و vh و svh و dvh): قياسات ذكية تُحسب ديناميكياً نسبةً إلى مرجع آخر كحجم خط الجذر <html> أو أبعاد الحاوية الأم أو نافذة العرض.

ولكي ترى أثر العرض والارتفاع بوضوح بصري في أمثلة هذا الدرس، سنميز صناديق التجريب بلون خلفية مسمى عبر خاصية background-color.

الصف 2 صورة توضيحية
مخطط يصنف وحدات القياس في CSS إلى وحدات مطلقة ثابتة ووحدات نسبية مرتبطة بالخط والأب ووحدات نافذة العرض