مقارنة px vs em vs rem في CSS — أفضل وحدة للخطوط والمسافات

من أكثر الأسئلة شيوعاً في CSS: هل أستخدم px أم em أم rem؟ الإجابة الصحيحة تعتمد على نوع العنصر وسلوك التصميم المطلوب.

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

هذا الفصل مخصص للمقارنة العملية بين وحدات typography تحديداً، وليس للوحدات النسبية المرتبطة بالشاشة.

إذا كنت تبحث عن الفرق بين px و em و rem في CSS أو أفضل وحدة للخطوط في CSS أو متى أستخدم rem بدل px، فهذا الدرس يشرحها بشكل عملي.

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

• px: وحدة ثابتة لا تعتمد على حجم خط الأب أو الجذر.
• em: وحدة نسبية تعتمد على حجم خط العنصر الأب.
• rem: وحدة نسبية تعتمد على حجم خط عنصر html (الجذر).

التعريف البسيط: px ثابتة، em مرتبطة بالسياق المحلي، وrem مرتبطة بالجذر العام للموقع.

استخدام px في CSS

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

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

النتيجة المتوقعة: نفس الحجم تقريباً بغض النظر عن سياق العنصر الأب.

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

استخدام em في CSS

.parent {
    font-size: 20px;
}

.child {
    font-size: 1.5em;
}

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

النتيجة المتوقعة: إذا كان الأب 20px فـ 1.5em تساوي 30px.

خطأ شائع: التداخل العميق بالعناصر يضاعف أحجام em بشكل غير متوقع.

استخدام rem في CSS

html {
    font-size: 16px;
}

.title {
    font-size: 2rem; /* 32px */
}

ماذا يفعل هذا الكود؟ يحدد حجم العنوان بناءً على الجذر بدل الأب المباشر.

النتيجة المتوقعة: أحجام أكثر اتساقاً وسهولة في الإدارة.

خطأ شائع: تغيير html font-size بدون نظام واضح في المشروع.

متى أستخدم px ومتى em ومتى rem؟

• استخدم px للتفاصيل الدقيقة: حدود رفيعة، أيقونات صغيرة، قيم ثابتة جداً.
• استخدم em عندما تريد مكوناً يتدرج داخلياً مع حجم الأب.
• استخدم rem لمعظم أحجام النصوص والمسافات على مستوى الموقع.

أخطاء شائعة عند استخدام px و em و rem

١) خلط عشوائي للوحدات: يسبب عدم اتساق بصري بين المكونات.

٢) الإفراط في em داخل تداخلات كثيرة: أحجام غير متوقعة.

٣) تجاهل rem في Typography: يقلل المرونة مع إعدادات المستخدم.

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

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

px ثابتة، em تعتمد على حجم خط الأب، وrem تعتمد على حجم خط الجذر html.

لماذا rem أفضل من px في CSS؟

لأنها أسهل في إدارة نظام الأحجام وتدعم المرونة والوصول بشكل أفضل.

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

عندما تحتاج مكوناً يتدرج داخلياً مع الأب، مثل أزرار أو بطاقات داخل قسم محدد.

هل يمكن استخدام px و rem معاً؟

نعم، وهذا شائع: rem للنصوص والمسافات العامة وpx للتفاصيل الدقيقة.

ما أفضل وحدة لحجم الخط في CSS؟

غالباً rem هي الخيار الأكثر اتزاناً للمواقع الحديثة.