شرح الأبعاد في CSS — كيف تتحكم في width و height للتصميم المتجاوب؟

التحكم في أبعاد العناصر في CSS هو أساس التخطيط الصحيح. كثير من مشاكل الواجهة تأتي من فهم غير دقيق لـ width وheight.

إذا كنت تبحث عن شرح width و height في CSS أو متى أستخدم max-width في CSS أو كيف أجعل العناصر responsive، فهذا الدرس عملي ومباشر.

ما هي الأبعاد في CSS؟

الأبعاد تتحكم في مساحة المحتوى داخل العنصر:

• width: عرض المحتوى.
• height: ارتفاع المحتوى.
• max-width: أقصى عرض مسموح.
• min-height: أقل ارتفاع مسموح.

التعريف البسيط: Dimensions في CSS هي خصائص تحدد حجم العنصر وكيف يتكيف مع الشاشات المختلفة.

width و height في CSS

يمكنك تحديد الأبعاد بقيم ثابتة أو نسبية:

• px: قيمة ثابتة (مثال: 200px).
• %: نسبة من حجم العنصر الأب.
• auto: المتصفح يحسب القيمة تلقائياً.

.box-fixed {
    width: 200px;
    height: 100px;
}

.box-fluid {
    width: 50%;
    height: 80px;
}

ماذا يفعل هذا الكود؟ ينشئ صندوقاً ثابتاً وصندوقاً مرناً بنسبة من الأب.

سطر بسطر:

• 200px: عرض ثابت لا يتغير مع الشاشة.
• 50%: عرض مرن يعتمد على الحاوية.

النتيجة المتوقعة: عنصر ثابت وآخر responsive.

خطأ شائع: استخدام عرض ثابت كبير في الموبايل فيسبب overflow.

max-width في CSS (مهم جداً للتصميم المتجاوب)

max-width تمنع العنصر من تجاوز حد معين، وفي نفس الوقت تسمح له بالتصغير على الشاشات الصغيرة.

img {
    width: 800px;
    max-width: 100%;
    height: auto;
}

ماذا يفعل هذا الكود؟ الصورة قد تكون كبيرة على الشاشات الواسعة، لكنها لا تتجاوز عرض الشاشة الصغيرة.

النتيجة المتوقعة: صورة مرنة لا تكسر layout.

خطأ شائع: استخدام width: 800px بدون max-width: 100%.

min-height في CSS

min-height تضمن أن العنصر لن يكون أقل من ارتفاع محدد، حتى لو كان المحتوى قليل.

section {
    min-height: 300px;
}

ماذا يفعل هذا الكود؟ يجعل القسم بارتفاع لا يقل عن 300px.

النتيجة المتوقعة: توازن بصري أفضل خصوصاً في الأقسام الرئيسية.

خطأ شائع: استخدام height ثابت في محتوى متغير بدلاً من min-height.

متى نستخدم width/height ومتى نستخدم max-width/min-height؟

• width/height: عندما تريد قيماً دقيقة وثابتة.
• max-width: عندما تريد مرونة مع حد أعلى (أفضل للميديا).
• min-height: عندما تريد ضمان مساحة دنيا للقسم.

أخطاء شائعة في Dimensions in CSS

١) ارتفاع ثابت لمحتوى ديناميكي: يسبب قص النص.

٢) عرض ثابت كبير: يكسر التصميم على الهاتف.

٣) نسيان box model: padding/border قد تزيد الحجم النهائي.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما الفرق بين width و max-width في CSS؟

width قيمة مباشرة، بينما max-width حد أعلى يسمح بالمرونة.

كيف أجعل الصورة responsive في CSS؟

استخدم غالباً: max-width: 100%; وheight: auto;.

ما الفرق بين height و min-height في CSS؟

height قيمة ثابتة، بينما min-height حد أدنى يمكن تجاوزه إذا زاد المحتوى.

لماذا العنصر يتجاوز الشاشة في CSS؟

غالباً بسبب عرض ثابت كبير أو تجاهل padding/border في الحساب.

هل الأفضل استخدام px أم % في width في CSS؟

px للدقة الثابتة، و% أو max-width لمرونة التصميم المتجاوب.