دليل CSS Units — خريطة كاملة لوحدات القياس ومتى تستخدم كل وحدة

وحدات القياس في CSS تحدد أحجام الخطوط والعناصر والمسافات. اختيار الوحدة الصحيحة يفرق كثيراً بين تصميم ثابت وتصميم متجاوب.

قبل أن تبدأ

هذا الدرس خريطة عامة لكل الوحدات. بعده سنفصل المقارنة بين px وem وrem، ثم الوحدات النسبية للتجاوب.

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

ما هي CSS Units؟

وحدات القياس هي الطريقة التي نكتب بها القيم في CSS مثل 16px أو 1rem أو 70%. بدون وحدة مناسبة، قد يبدو التصميم غير متوازن على الشاشات المختلفة.

التعريف البسيط: CSS units هي اللغة التي تحدد "كم" حجم العنصر أو النص داخل الصفحة.

أنواع وحدات القياس في CSS

• وحدات ثابتة: مثل px.
• وحدات نسبية: مثل em و rem و % و vw و vh.

الفرق بين px و rem في CSS

.text-px {
    font-size: 18px;
}

.text-rem {
    font-size: 1.125rem;
}

ماذا يفعل هذا الكود؟ يعطي حجمين متقاربين للنص لكن بطريقتين مختلفتين.

النتيجة المتوقعة: rem يكون أكثر مرونة مع إعدادات المستخدم وحجم الجذر.

خطأ شائع: الاعتماد الكامل على px في كل النصوص.

استخدام % في CSS Layout

.box {
    width: 70%;
}

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

النتيجة المتوقعة: عنصر مرن يتغير مع حجم الشاشة.

خطأ شائع: استخدام % بدون فهم أبعاد العنصر الأب.

استخدام vw و vh في CSS

.hero {
    width: 100vw;
    height: 50vh;
}

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

النتيجة المتوقعة: أقسام تتجاوب بسهولة مع حجم الشاشة.

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

متى أستخدم كل وحدة في CSS؟

• استخدم rem للنصوص والمسافات العامة في المشروع.
• استخدم px للتفاصيل الدقيقة مثل الحدود والأيقونات الصغيرة.
• استخدم % للعروض المرنة داخل Layout.
• استخدم vw وvh للأقسام المرتبطة بالشاشة.

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

١) خلط عشوائي للوحدات: يؤدي لواجهة غير متناسقة.

٢) استخدام px لكل شيء: يقلل مرونة التصميم المتجاوب.

٣) تجاهل اختبار الموبايل: قيم جيدة على الديسكتوب قد تفشل على الهاتف.

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

ما هي وحدات القياس في CSS؟

هي وحدات تحدد أحجام العناصر والنصوص والمسافات مثل px و em و rem و % و vw و vh.

ما الفرق بين px و rem في CSS؟

px ثابتة، بينما rem نسبية وتعتمد على حجم خط عنصر html.

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

عندما تريد حجماً يعتمد على العنصر الأب مثل عرض الأعمدة والبطاقات.

متى أستخدم vw و vh؟

عندما تريد عناصر مرتبطة مباشرة بأبعاد الشاشة مثل أقسام hero.

ما أفضل وحدة للنصوص في CSS؟

غالباً rem لأنها مرنة وأسهل لإدارة نظام typographic متناسق.