| الخاصية أو الوحدة | نوع التأثير وطريقة العمل | الفائدة البرمجية والتصميم المتجاوب |
|---|---|---|
| العرض والارتفاع width height | يحددان أبعاد العنصر بشكل ثابت ومباشر | يُستخدمان لتثبيت أحجام المكونات التي لا تحتاج لتغيير أبعادها |
| الحد الأدنى للأبعاد min-width min-height | يضمنان عدم تقلص أو صغر حجم العنصر عن القيمة المحددة مهما قل المحتوى | حماية صناديق النصوص والبطاقات من التداخل والتشوه عند صغر الشاشة |
| الحد الأقصى للأبعاد max-width max-height | يضمنان عدم تمدد أو كبر حجم العنصر عن القيمة المحددة مهما كبر المحتوى | جعل الحاويات والصور مرنة ومتجاوبة بحيث لا تخرج عن حدود الشاشات الصغيرة |
| وحدة البكسل px | وحدة قياس ثابتة ومطلقة لا تتغير بتغير المتصفح | تستخدم للحدود الدقيقة والهوامش الثابتة التي لا تحتاج لمرونة |
| وحدة النسبة المئوية % | وحدة قياس نسبية تُحسب بناءً على حجم العنصر الأب مباشرة | بناء أعمدة وتقسيمات مرنة تتسع وتضيق بحجم الحاوية الكبرى |
| وحدة الـ em | وحدة نسبية تُحسب بناءً على حجم خط العنصر الحالي أو الأب | تصغير وتكبير الهوامش والحشو تلقائياً عند تغيير حجم الخط |
| وحدة الـ rem | وحدة نسبية تُحسب بناءً على حجم الخط الأساسي للموقع بالكامل المتواجد في جذر الموقع | الأسلوب الأفضل لتنسيق الهوامش والخطوط لضمان توافقية وسهولة القراءة |
| وحدات الشاشة vw vh | وحدات نسبية تُحسب كنسبة مئوية من العرض أو الارتفاع الكامل لشاشة المستخدم | بناء أقسام تأخذ مساحة الشاشة بالكامل مثل صفحة الهبوط الترحيبية الأولى للموقع |
| الوضع التلقائي auto | يترك للمتصفح الحرية الكاملة لحساب الأبعاد بناءً على حجم المحتوى المحاط | تستخدم لتوسيط العناصر في منتصف الصفحة تلقائياً عند دمجها مع الهوامش الخارجي وممتازة للصور |
التحكم في أبعاد العناصر أحد أساسيات CSS. هناك ست خصائص رئيسية:
**width / height** — يحددان العرض والارتفاع بشكل ثابت.
**min-width / min-height** — يضمنان أن العنصر لا يصغر عن حد معين.
**max-width / max-height** — يضمنان أن العنصر لا يكبر عن حد معين.
**وحدات القياس الشائعة:** - `px` — بكسل ثابت - `%` — نسبة من العنصر الأب - `em` — نسبة من حجم الخط الحالي - `rem` — نسبة من حجم خط root (html) - `vw / vh` — نسبة من عرض/ارتفاع النافذة - `auto` — يتيح للمتصفح حساب القيمة
**نصيحة التصميم المتجاوب:** استخدم `max-width` بدلاً من `width` الثابت للحاويات لأنها تتكيف مع الشاشات الصغيرة.
| 1 | /* حاوية متجاوبة */ |
| 2 | .container { |
| 3 | width: 100%; |
| 4 | max-width: 1200px; |
| 5 | margin: 0 auto; |
| 6 | } |
| 7 | |
| 8 | /* صورة متجاوبة */ |
| 9 | img { |
| 10 | width: 100%; |
| 11 | height: auto; |
| 12 | max-width: 600px; |
| 13 | } |
مثال 1: بطاقة بأبعاد متجاوبة
| 1 | .card { |
| 2 | width: 100%; |
| 3 | min-width: 280px; |
| 4 | max-width: 400px; |
| 5 | min-height: 200px; |
| 6 | padding: 20px; |
| 7 | border-radius: 12px; |
| 8 | background: white; |
| 9 | box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| 10 | } |