شرح % و vw و vh في CSS — وحدات التخطيط المتجاوب عملياً

الوحدات النسبية في CSS مثل % و vw و vh هي أساس بناء واجهات متجاوبة تعمل بشكل أفضل على مختلف الشاشات.

تركيز هذا الدرس

هذا الفصل يركز على وحدات layout المرتبطة بالأب أو بالـ viewport، وليس على وحدات typography مثل rem.

إذا كنت تبحث عن الفرق بين % و vw و vh أو متى أستخدم الوحدات النسبية في CSS أو أفضل وحدات للتصميم المتجاوب، فهذا الدرس يشرحها بشكل عملي.

ما المقصود بالوحدات النسبية في CSS؟

هي وحدات لا تعتمد على قيمة ثابتة مثل px، بل تعتمد على سياق مثل حجم العنصر الأب أو أبعاد الشاشة.

التعريف البسيط: الوحدات النسبية تتكيف تلقائياً مع البيئة المحيطة، لذلك هي مناسبة للتصميم المتجاوب.

استخدام % في CSS

.container {
    width: 100%;
}
.box {
    width: 70%;
}

ماذا يفعل هذا الكود؟ يجعل عرض العنصر الابن مرتبطاً بعرض الحاوية الأب.

النتيجة المتوقعة: عرض مرن يتغير مع تغير حجم الأب.

خطأ شائع: توقع أن % تعتمد دائماً على الشاشة مباشرة.

استخدام vw في CSS

vw اختصار لـ Viewport Width، أي نسبة من عرض الشاشة.

• 100vw = عرض الشاشة بالكامل.
• 50vw = نصف عرض الشاشة.

.banner {
    width: 60vw;
}

ماذا يفعل هذا الكود؟ يربط عرض العنصر بنسبة مباشرة من عرض نافذة المتصفح.

النتيجة المتوقعة: العنصر يتمدد أو يتقلص مباشرة مع الشاشة.

خطأ شائع: استخدام 100vw بدون مراعاة الـ scrollbar في بعض الحالات.

استخدام vh في CSS

vh اختصار لـ Viewport Height، أي نسبة من ارتفاع الشاشة.

.hero {
    height: 60vh;
}

ماذا يفعل هذا الكود؟ يجعل ارتفاع العنصر مرتبطاً بنسبة من ارتفاع الشاشة.

النتيجة المتوقعة: مناسب لأقسام Hero أو Sections كبيرة.

خطأ شائع: استخدام 100vh على الموبايل دون اختبار شريط المتصفح.

متى أستخدم % و vw و vh في CSS؟

• استخدم % عندما تريد أن يتبع العنصر حجم الأب.
• استخدم vw عندما تريد أن يتبع العنصر عرض الشاشة مباشرة.
• استخدم vh عندما تريد ارتفاعاً مرتبطاً بالشاشة مثل Hero section.

أخطاء شائعة في الوحدات النسبية CSS

١) استخدام vh بدون اختبار موبايل: قد يظهر قص أو فراغ غير متوقع.

٢) خلط وحدات بلا نظام: يسبب عدم اتساق في الواجهة.

٣) تجاهل العلاقة مع الأب عند %: نتائج غير متوقعة في layout.

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

ما هي الوحدات النسبية في CSS؟

هي وحدات تعتمد على سياق مثل حجم الأب أو أبعاد الشاشة، مثل % وvw وvh.

ما الفرق بين % و vw في CSS؟

% تعتمد غالباً على العنصر الأب، بينما vw تعتمد على عرض الشاشة مباشرة.

متى أستخدم vh في CSS؟

عندما تريد ارتفاعاً مرتبطاً بارتفاع الشاشة، خصوصاً في Hero sections.

هل vw و vh جيدتان دائماً للموبايل؟

مفيدتان، لكن يجب الاختبار جيداً لأن ارتفاع المتصفح في الهاتف قد يتغير أثناء التمرير.

ما أفضل ممارسة للوحدات النسبية؟

استخدم نظاماً واضحاً: rem للنص، و%/vw/vh للتخطيط.