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

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

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

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

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

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

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

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

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

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

rem = px ÷ حجم خط الجذر

مثال

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

24 ÷ 16 = 1.5rem

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

24 ÷ 10 = 2.4rem

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

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

px = rem × حجم خط الجذر

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

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

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

em = px ÷ حجم خط العنصر الأب

مثال

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

24 ÷ 20 = 1.2em

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

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

px = em × حجم خط العنصر الأب

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

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

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

em = rem × (حجم خط الجذر ÷ حجم خط العنصر الأب)

rem = em × (حجم خط العنصر الأب ÷ حجم خط الجذر)

مثال

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

2 × (16 ÷ 20) = 1.6em

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

المراجع

1. اتحاد شبكة الويب العالمية (W3C). CSS Values and Units Module Level 4. قيم وحدات CSS، المستوى 4، الأطوال النسبية إلى الخط — تساوي em حجم الخط المحسوب للعنصر (الحجم الموروث عند استخدامها في font-size)، وتساوي rem وحدة em للعنصر الجذر.
2. Mozilla. font-size، وثائق MDN على الويب. MDN: font-size — عندما لا يُضبط حجم خط للعناصر السلفية، تساوي 1em الحجم الافتراضي للمتصفح، وهو عادةً 16 بكسل.
3. W3C مبادرة إتاحة الويب. Understanding Success Criterion 1.4.4: Resize Text. WCAG 2.1 الفهم 1.4.4 — يمكن تكبير النص حتى 200 بالمئة دون فقدان المحتوى أو الوظائف.
4. اتحاد شبكة الويب العالمية (W3C). CSS Box Model Module Level 4. نموذج صندوق CSS، المستوى 4 — القيم السالبة لخصائص الحشو غير صالحة.