تخطي إلى المحتوى
🛠️
Whiz Tools

محول بيكسل إلى REM إلى EM - آلة حاسبة وحدات CSS مجانية

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

محول وحدات PX، REM، و EM

تحويل بين وحدات البكسل (PX)، الجذر إم (REM)، والإم (EM). أدخل قيمة في أي حقل لرؤية القيم المكافئة في الوحدات الأخرى.

px
px
px
rem
em
المرئيات غير متاحة للقيم السالبة أو الصفرية

صيغ التحويل

  • PX إلى REM: القيمة بالبكسل ÷ حجم الخط الجذري
  • PX إلى EM: القيمة بالبكسل ÷ حجم خط العنصر الأصلي
  • REM إلى PX: القيمة بالـ REM × حجم الخط الجذري
  • EM إلى PX: القيمة بالـ EM × حجم خط العنصر الأصلي
حاسبة التحميل...
📚

التوثيق

محوّل وحدات PX وREM وEM

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

ما المقصود بـ px وrem وem؟

البكسل (px) وحدة ثابتة. يبقى عرض صندوق مضبوط على 200px هو 200px مهما كان حجم الخط الذي تستخدمه الصفحة.

rem («em الجذرية») وحدة تتدرج مع حجم خط العنصر الجذري في الصفحة، وهو عادةً وسم <html>. يضبط معظم المتصفحات حجم خط الجذر على 16px ما لم يغيّره الموقع. وإذا كان حجم خط الجذر هو 16px، فإن 1rem تساوي 16px.

em وحدة تتدرج مع حجم خط العنصر الأب، أي العنصر الذي يحتويها. فإذا كان للعنصر الأب font-size: 20px، فإن 1em داخله تساوي 20px.

يكمن الفرق الرئيسي بين rem وem في المرجع الذي يقيس كل منهما على أساسه. إذ تشير rem دائمًا إلى العنصر الجذري، بينما تشير em إلى أقرب عنصر أب، ولذلك يمكن أن تتغير قيمتها عند كل مستوى من مستويات التداخل.

كيفية حساب px إلى rem

لتحويل البكسل إلى rem، اقسم قيمة البكسل على حجم خط الجذر:

r=pRr = \frac{p}{R}

حيث إن r هو الطول بوحدة rem، وp هو الطول بالبكسل، وR هو حجم خط الجذر بالبكسل.

مثال محلول

باستخدام حجم خط الجذر الافتراضي البالغ 16px، تتحول 24px إلى:

24 ÷ 16 = 1.5rem

إذا ضبط موقع ما حجم خط الجذر على 10px، وهي حيلة شائعة تُنفّذ بضبط html { font-size: 62.5%; }، لأن 62.5% من 16px تساوي 10px، فإن قيمة 24px نفسها تصبح:

24 ÷ 10 = 2.4rem

كيفية حساب rem إلى px

للتحويل في الاتجاه الآخر، اضرب قيمة rem في حجم خط الجذر:

p=r×Rp = r \times R

حيث إن p هو الطول بالبكسل، وr هو الطول بوحدة rem، وR هو حجم خط الجذر.

مع جذر حجمه 16px، تتحول 1.5rem مجددًا إلى 1.5 × 16 = 24px.

كيفية حساب px إلى em

لتحويل البكسل إلى em، اقسم قيمة البكسل على حجم خط العنصر الأب:

e=pPe = \frac{p}{P}

حيث إن e هو الطول بوحدة em، وP هو حجم خط العنصر الأب بالبكسل.

مثال محلول

إذا كان حجم خط العنصر الأب هو 20px، فإن 24px تتحول إلى:

24 ÷ 20 = 1.2em

كيفية حساب em إلى px

اضرب قيمة em في حجم خط العنصر الأب:

p=e×Pp = e \times P

حيث إن p هو الطول بالبكسل، وe هو الطول بوحدة em، وP هو حجم خط العنصر الأب.

مع عنصر أب حجمه 20px، تتحول 1.2em مجددًا إلى 1.2 × 20 = 24px.

كيفية حساب rem إلى em وem إلى rem

لأن rem وem تقيسان على أساس أحجام خطوط مختلفة، فإن التحويل بينهما يحتاج إلى حجم خط الجذر وحجم خط العنصر الأب معًا:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

حيث إن R هو حجم خط الجذر وP هو حجم خط العنصر الأب.

مثال محلول

مع حجم خط جذر قدره 16px وحجم خط أب قدره 20px، تتحول 2rem إلى:

2 × (16 ÷ 20) = 1.6em

إذا تساوى حجما خط الجذر والعنصر الأب، فإن 1rem تساوي دائمًا 1em.

متى تكون كل وحدة مفيدة؟

تناسب البكسلات التفاصيل التي ينبغي ألا يتغير حجمها، مثل حد بعرض 1px أو أيقونة ذات عرض ثابت.

تُستخدم rem عادةً للمسافات والطباعة التي ينبغي أن تظل متسقة في أنحاء الصفحة. ولأنها تشير دائمًا إلى حجم خط الجذر، فلا تتغير قيمة rem مهما ازداد عمق تداخل العنصر. وهذا يعني أيضًا أن التخطيطات المعتمدة على rem تتكيف تلقائيًا عندما يزيد المستخدم حجم الخط الافتراضي في متصفحه، مما يساعد القراء ضعاف البصر.

تناسب em مكوّنًا واحدًا مستقلًا، مثل زر ينبغي أن تتدرج حشوته مع حجم خط الزر نفسه. ومن المشكلات الشائعة في em أنها تتراكم: فإذا استخدمت عدة عناصر متداخلة كلٌّ منها font-size: 1.2em، يضرب كل مستوى القيمة السابقة، فتزداد أحجام الخطوط أسرع مما هو مقصود.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

بعد ثلاثة مستويات، يكون النص قد ازداد بنحو 73%، لا بنسبة 20% التي قد يتوقعها المطوّر من قاعدة واحدة هي 1.2em.

استخدام المحوّل

  1. أدخل قيمة في حقل البكسل أو rem أو em.
  2. يتحدّث الحقَلان الآخران تلقائيًا، مع التقريب إلى أربعة منازل عشرية.
  3. اضبط حجم خط الجذر ليتطابق مع عنصر <html> في المشروع. وتكون قيمته 16px افتراضيًا في معظم المتصفحات، ولا يؤثر إلا في rem.
  4. اضبط حجم خط العنصر الأب ليتطابق مع حجم خط العنصر الذي ستوضع داخله قيمة em. ولا يؤثر إلا في em.
  5. استخدم زر النسخ بجوار الحقل لنسخ قيمته.

يقبل حقلا حجم الخط عددًا صحيحًا من البكسلات، وأصغر قيمة مسموحة هي 1px. يمسح زر إعادة الضبط القيمة ويعيد حجمي الخطين إلى 16px.

يرسم النظام أسفل الحقول شريطًا واحدًا لكل وحدة. تمثل الأشرطة الثلاثة الطول الفعلي نفسه، ولذلك تكون بالعرض نفسه، مما يوفر فحصًا سريعًا للتأكد من صحة التحويل. يُرسم الشريط بطوله الحقيقي بالبكسل حتى 300px؛ أما ما يزيد على ذلك فيُصغّر ليلائم المساحة، ولذلك تنتهي قيمة 600px وقيمة 900px كلتاهما عند300px. ولا تظهر الأشرطة إلا عندما تكون قيمة البكسل أكبر من الصفر.

الأسئلة الشائعة

ما الفرق بين rem وem؟ تشير rem دائمًا إلى حجم خط العنصر الجذري. أما em فتشير إلى حجم خط أقرب عنصر أب. وتبقى قيمة rem نفسها في كل موضع من الصفحة، بينما يمكن أن تتغير قيمة em بحسب عمق تداخل العنصر.

لماذا تستخدم المتصفحات 16px حجمًا افتراضيًا للخط؟ لطالما كان 16px حجم النص الافتراضي في المتصفحات الرئيسية، لأنه مريح للقراءة على الشاشات المعتادة من دون تنسيق إضافي. وتوصي إرشادات إتاحة الويب بإمكانية تكبير النص حتى 200% من دون أن يختل تخطيط الصفحة، ويمثل 16px نقطة بداية عملية لذلك.

ما حيلة 62.5%؟ يؤدي ضبط html { font-size: 62.5%; } إلى تحويل حجم خط الجذر الافتراضي البالغ 16px إلى 10px، لأن 62.5% من 16 تساوي 10. وهذا يجعل حساب rem أبسط، لأن 1.6rem تساوي 16px و2.4rem تساوي 24px.

هل يمكن أن تكون قيم px وrem وem سالبة؟ نعم، في الخصائص التي تقبل الأطوال السالبة، مثل الهوامش أو تحويلات CSS. لا يمكن أن تكون الحشوة سالبة في CSS؛ إذ تتجاهل المتصفحات قيمة الحشوة السالبة. يتعامل المحوّل مع القيم السالبة، لكنه لا يرسم لها أشرطة، لأن الشريط لا يمكن أن يكون عرضه سالبًا.

هل ينبغي تحويل كل قيمة بالبكسل إلى rem؟ ليس بالضرورة. فعادةً ما تُترك الحدود والتفاصيل الدقيقة الأخرى بالبكسل، لأنها نادرًا ما تحتاج إلى التدرج مع حجم الخط، وقد تبدو غير متساوية عند استخدام عروض جزئية للبكسل. وتناسب rem المسافات والطباعة التي ينبغي أن تتدرج مع تفضيل المستخدم لحجم الخط.

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