تحويل rem إلى px Root em ↔ Pixels مجاناً عبر الإنترنت آمن

لماذا تحتاج إلى تحويل rem إلى px

تفتح ورقة أنماط فترى padding: 2.25rem على بطاقة وfont-size: 0.8125rem على تعليق توضيحي. إنهما قيمتان جيدتان، مكتوبتان كما ينبغي أن يُكتب CSS الحديث، لكنهما لا تخبرانك بشيء من النظرة الأولى. كم يبلغ حجم حشوة تلك البطاقة على الشاشة؟ وهل سيكون التعليق مقروءاً؟ وهل يطابق 36 px و13 px في ملف التصميم الذي سُلّم إليك؟ للإجابة تحوّل rem إلى px: تضرب في حجم خط الجذر وتقرأ الجواب بالوحدة التي تستخدمها أدوات التصميم. وهذا عكس الاتجاه المعتاد، وهو ما تفعله حين تقرأ الشيفرة أو تقارن تصميماً بالبناء أو تشرح تخطيطاً لشخص يفكر بالبكسلات.

التحويل سهل؛ وما يجعله يستحق صفحة هو الأساس. فالـ rem ليست مقاساً بل مضاعف لمقاس، هو حجم خط عنصر الجذر. وفي متصفح لم يغيّر أحد إعداده يكون هذا الحجم 16 px، فتكون 1 rem مساوية لـ 16 px، و2.25 rem مساوية لـ 36 px، و0.8125 rem مساوية لـ 13 px. لكن ورقة الأنماط تستطيع تغيير الجذر، ويستطيع القارئ تغييره في المتصفح، فتتحرك كل قيم rem في الصفحة معه. ولذلك تطلب الصفحة الأساس وتستخدمه بدلاً من إخفائه.

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

المعادلة والأساس

px تساوي rem مضروبة في الأساس

المعادلة ضرب واحد: px = rem × الأساس. وبالأساس المعتاد 16 px تصبح 1.5 rem مساوية لـ 24 px، و0.75 rem مساوية لـ 12 px، و4 rem مساوية لـ 64 px. وتطبع الصفحة الأساس بجانب النتيجة، فسطر مثل 1.5 rem = 24 px (16 px) يذكر ما افترضه، وترى فوراً هل يطابق مشروعك.

معرفة أساسك

ابحث في ورقة الأنماط عن قاعدة على html أو :root تضبط font-size. فإذا لم توجد فالأساس هو الافتراضي للمتصفح، 16 px. وإذا وُجدت، مثل 62.5%، فخذ هذه النسبة من 16: فـ 62.5% تعطي 10 px. ويمكنك أيضاً في أدوات المطور بالمتصفح أن تحدد عنصر الجذر وتقرأ حجم خطه المحسوب، وهو الرقم الذي تكتبه في حقل الأساس.

حين يكون حجم الجذر متغيراً

تجعل بعض المواقع حجم الجذر ينمو مع النافذة باستخدام تعبير clamp. عندها لا تكون لـ 1 rem قيمة بكسلية واحدة على الإطلاق: فهي 15 px على الهاتف و18 px على شاشة عريضة. وفي هذه الحالة يكون أي تحويل لقطة لحظية. اكتب الأساس الذي تراه عند العرض الذي يهمك، وافهم أن الجواب صالح عند ذلك العرض وحده.

ما يحفظه التحويل وما لا يستطيعه

يحفظ النسبة

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

لا يستطيع معرفة إعدادات قارئك

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

التقريب

لأن الأساس عادة عدد صحيح، فإن حاصل الضرب عادة دقيق. فـ 0.8125 rem تساوي 13 px تماماً بأساس 16؛ و0.6875 rem تساوي 11 px تماماً. وإذا حصلت على كسر عشري طويل فهذه علامة على أن قيمة rem حُسبت من أساس غير الذي كتبته.

قيم شائعة

الجدول في أسفل الصفحة

تتضمن الصفحة جدولاً بقيم البكسل التي تقابلها أرقام rem الشائعة عند الأساس الذي ضبطته: 0.5 rem هي 8 px، و0.625 هي 10، و0.75 هي 12، و0.875 هي 14، و1 هي 16، و1.125 هي 18، و1.25 هي 20، و1.5 هي 24، و2 هي 32، و3 هي 48، و4 هي 64. هذه هي القيم التي تظهر أكثر من غيرها في التباعد وسلالم الحروف، ومعرفتها عن ظهر قلب تجعل ورقة الأنماط مقروءة من النظرة الأولى.

قراءة ورقة أنماط بالبكسلات

تمرين مفيد أن تأخذ ورقة أنماط لم تكتبها وتترجم قيمها الرئيسية إلى بكسلات مرة واحدة، وتكتب النتائج في ملاحظة. حجم أساسي 1 rem، وعناوين 1.5 و2.25 rem، وفجوة حاوية 2 rem: بالبكسلات هي 16 و24 و36 و32. وبهذه الطريقة يظهر منطق التصميم، ويمكنك مقارنته بملف التصميم دون حاسبة.

كيف تحوّل rem إلى px هنا

اكتب قيمة rem

أدخل المقاس بوحدة rem في الحقل الأول. الكسور العشرية مقبولة، فـ 0.8125 تعمل كما تعمل 1.

اضبط الأساس

اتركه عند 16 إذا كان CSS لا يغيّر حجم الجذر. وغيّره إذا كان يغيّره. وتتحدث النتيجة أثناء الكتابة.

اقرأ القيمة بالبكسل

يظهر الجواب فوراً ومعه الأساس بجانبه، لتعرف ما الذي افتُرض. انسخه إلى ملاحظاتك أو قارنه بملف التصميم.

من أين تأتي هذه الوحدات

بكسل CSS

حين لم تعد الشاشات ذات كثافة يمكن التنبؤ بها، صارت الصفحة المقيسة بالبكسلات الحقيقية صفحة تنكمش كلما ازدادت الشاشات حدة. ولذلك أُعيد تعريف بكسل CSS على أنه طول مرجعي: نحو 1/96 من البوصة عند مسافة قراءة مريحة. فالبكسل في ورقة الأنماط ليس نقطة على شاشتك بل وحدة طول يحوّلها المتصفح إلى ما تحتاجه الشاشة من نقاط.

الـ rem

الـ em أقدم من الويب: ففي الحروف المعدنية كان عرض القالب المصبوب، وسُمّي على اسم حرف M الكبير، وفي CSS يعني حجم الخط السائد، ولهذا يتغير كلما تداخلت العناصر. وأُضيفت rem للإفلات من ذلك بالضبط: فهي الـ em لعنصر الجذر ولا تتراكم أبداً. ولترى الفرق بالأرقام، حوّل px إلى em وقارنه بما تحصل عليه حين تحوّل rem إلى px.

متى يحوّل المطورون rem إلى px

مقارنة البناء بملف التصميم

يسلّم المصمم ملفاً بالبكسلات؛ وكتب المطور الشيفرة بـ rem. وللتحقق من تطابق الصفحة يحوّل rem إلى px ويقارن الأرقام. ويظهر أي اختلاف فوراً: فـ 1.375 rem تساوي 22 px، وإذا كان التصميم يقول 24 فأحدهما خطأ.

قراءة شيفرة غير مألوفة

حين ترث ورقة أنماط، تخفي قيم rem المقاسات الحقيقية. وتحويل حفنة من القيم الرئيسية يعطيك خريطة للتصميم: كم هو كبير الحرف، وكم هي عريضة الهوامش، وأين تقع نقاط التوقف.

كتابة تقارير الأخطاء والتوثيق

يصف من يختبرون الصفحة ما يرونه بالبكسلات. والمطور الذي يقول إن الحشوة 2.5 rem يعني القليل للمختبر؛ أما 40 px فلها معنى. ويجعل التحويل الطرفين يفهم أحدهما الآخر.

ضبط قيم يجب أن تكون دقيقة بالبكسل

بعض الأشياء يجب أن تكون عدداً دقيقاً من بكسلات الجهاز وإلا بدت باهتة: حد بعرض بكسل واحد، أو أيقونة مرسومة على شبكة 24 px. وإذا كان المقاس يجب أن يقع على شبكة البكسلات، فإن تحويل rem إلى px يخبرك هل يقع عند أساسك.

أفخاخ حين تحوّل rem إلى px

نسيان حجم جذر مغيَّر

إذا ضُبط الجذر على 62.5% أو على تعبير clamp، فإن العامل المعياري 16 لا ينطبق. وتكون النتيجة خاطئة بنسبة الأساسين. تحقق من الأساس أولاً دائماً.

الخلط بين rem وem

الـ em نسبية إلى حجم خط العنصر نفسه، لا إلى الجذر. وقيمة 1.5em داخل عنوان بحجم 24 px تساوي 36 px، لكنها داخل فقرة بحجم 16 px تساوي 24 px. وهذه الصفحة تحوّل rem، التي لا لبس فيها. وللـ em انظر من em إلى px.

افتراض أن الشاشة تعرض البكسلات نفسها

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

التقريب مبكراً

إذا قرّبت 13.333 px إلى 13 ثم حوّلت عائداً، فستحصل على 0.8125 rem، لا على 0.8333 التي بدأت بها. احتفظ بقيمة rem الأصلية حين يهم الأمر.

أسئلة يطرحها الناس قبل التحويل

كم بكسلاً تساوي 1 rem؟

ستة عشر، في متصفح لم يتغير إعداده الافتراضي.

كم بكسلاً تساوي 2 rem؟

اثنان وثلاثون عند الأساس الافتراضي. وعند أساس 10 ستكون 20.

لماذا يعرض متصفحي شيئاً مختلفاً؟

إعداد القارئ أو قاعدة في ورقة الأنماط غيّرا حجم الجذر. انظر إلى حجم الخط المحسوب لعنصر الجذر في أدوات المطور.

هل rem هي نفسها em؟

لا. rem تشير إلى عنصر الجذر وem تشير إلى العنصر نفسه.

هل يُرفع رقمي؟

لا. تجري العملية الحسابية في متصفحك ولا يُرسَل شيء إلى أي مكان.

كيف أعود؟

باستخدام من px إلى rem، التي تقسم بدلاً من أن تضرب.

عادات تجعل ورقة أنماط rem سهلة القراءة

اكتب قيمة البكسل في تعليق

سطر مثل gap: 1.5rem; /* 24px */ يكلف بضعة أحرف ويوفر على القارئ التالي تحويلاً. ويسجل أيضاً الأساس الذي افترضته.

استخدم سلماً صغيراً

مشروع لا يستخدم إلا حفنة من قيم rem، مثل 0.5 و1 و1.5 و2 و3، سهل التعلم: بعد يوم تعرفها بالبكسلات دون تفكير. وحين تحوّل rem إلى px لورقة أنماط كهذه فأنت لا تفعل سوى تأكيد ما تتذكره.

سمِّ قيمك

مع الخصائص المخصصة، مثل --space-md: 1.5rem، تصف ورقة الأنماط النية بدلاً من الأرقام. فالاسم يحمل المعنى، والرقم يوجد في مكان واحد.

اختبر بحجم افتراضي مختلف

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

الاستفادة من قيمة البكسل بعد أن تحوّل rem إلى px

قارن النسب، لا الأرقام وحدها

حين تحوّل rem إلى px لورقة أنماط كاملة، انظر إلى النسب بين المقاسات كما تنظر إلى المقاسات نفسها. فسلم حروف تكون فيه كل خطوة نحو 1.25 مرة السابقة يعطي 16 و20 و25 و31 و39 بكسلاً؛ وسلم بنسبة 1.5 يعطي 16 و24 و36 و54. ومعرفة النسبة تخبرك بما قصده المصمم، وتتيح لك أن تمدّ السلم باتساق حين تحتاج إلى مقاس جديد.

ترجم لمن يفكرون بالبكسلات

ليس كل أفراد الفريق يقرؤون rem. فمديرو المشاريع وكتّاب النصوص والعملاء كثيراً ما يعملون من لقطات الشاشة ويطلبون أن يكبر العنوان قليلاً. وإذا استطعت أن تقول إن العنوان 36 px الآن وسيكون 40 px عند 2.5 rem، فإن الحديث يقصر. والصفحة مفيدة كجسر سريع بين المفردتين.

افحص أهداف اللمس والحد الأدنى للمقاسات

تطلب إرشادات الشاشات اللمسية أهدافاً لا تقل عن نحو 44 px، وتطلب إرشادات النص نصاً أساسياً بحجم نحو 16 px أو أكثر. وكلاهما مذكور بالبكسلات. وللتحقق من ورقة أنماط مكتوبة بـ rem مقابلهما، حوّل rem إلى px وانظر هل تتجاوز الأزرار والنص الحد.

انتبه لحالة التكبير

القيمة التي تحصل عليها هي للأساس الذي كتبته. فإذا كان قراؤك قد يكبّرون النص، فجرّب التحويل مرة أخرى بأساس 20 أو 24 وانظر ما يطلبه التخطيط من الشاشة. فبطاقة مريحة عند 16 قد تفيض عند 24، وأفضل وقت لاكتشاف ذلك هو قبل نشر الصفحة.

محوّلات ذات صلة

تغطي عائلة الأدوات نفسها التحويلات المجاورة. وللعودة إلى rem استخدم من px إلى rem. وللمقاسات النسبية إلى العنصر توجد من px إلى em ومن em إلى px، وللمقاسات النسبية إلى الشاشة من px إلى vw ومن vw إلى px. وللألوان في ورقة الأنماط نفسها تجد من HEX إلى RGB ومن HSL إلى HEX في المتناول، ولأسماء الأصناف تحوّل من نص إلى kebab-case عبارة إلى اسم يقبله CSS.

مثال محلول

لنفترض أنك تراجع طلب دمج وفي ورقة الأنماط قسم رئيسي فيه padding: 5rem 1.5rem، وعنوان بحجم 3.5rem، وفقرة تمهيدية بحجم 1.25rem. ويقول ملف التصميم 80 px و24 px للحشوة، وعنواناً بحجم 56 px، وفقرة تمهيدية بحجم 20 px. تكتب 5 وتقرأ 80 px، وتكتب 1.5 وتقرأ 24، وتكتب 3.5 وتقرأ 56، وتكتب 1.25 وتقرأ 20. تتطابق الأربعة جميعاً، فالبناء أمين. ولو كان العنوان 3.25 rem لقرأت 52 ولاكتشفت الفرق قبل أن يصل إلى المصمم.

قائمة تحقق قصيرة

قبل التحويل

اعثر على الأساس: قاعدة الجذر في ورقة الأنماط، أو الحجم المحسوب في أدوات المطور.

أثناء التحويل

اكتب قيمة rem، وتحقق من الأساس المعروض بجانب النتيجة، ودوّن الرقم بالبكسل.

بعد التحويل

قارن بملف التصميم. فإذا اختلفت الأرقام فتحقق من الأساس قبل أن تشك في الشيفرة.

أخطاء شائعة

استخدام 16 دون تحقق

إنه الافتراضي، لا قاعدة. تحقق من الجذر.

معاملة البكسلات على أنها نهائية

الجواب صالح لأساس واحد. والقارئ الذي لديه افتراضي أكبر يرى بكسلات أكبر.

الخلط بين rem وem

تبدوان متشابهتين وتتصرفان بشكل مختلف. استخدم الصفحة الصحيحة لكل منهما.

أرقامك تبقى على جهازك

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

الخلاصة

لتحويل rem إلى px هنا، اكتب المقاس بوحدة rem واقرأه بالبكسلات فوراً، باستخدام المعادلة px = rem × الأساس. يبدأ الأساس من 16 px، وهو الافتراضي في المتصفح، ويمكنك تغييره ليطابق CSS الخاص بك. يحفظ التحويل النسبة، لأن الـ rem الواحدة هي أياً كان حجم خط الجذر، ولا يستطيع معرفة إعدادات قارئك، ولذلك يكون الرقم صحيحاً للأساس الموجود في الحقل فقط. ويساعدك جدول القيم الشائعة، من 0.5 rem عند 8 px إلى 4 rem عند 64 px، على قراءة ورقة أنماط من النظرة الأولى. ولا يُرفع شيء.