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

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

تتكلم أدوات التصميم بالبكسلات. يقول النموذج الأولي إن العنوان 32 px، والفراغ بين الأقسام 48 px، وللزر 16 px من الحشو. وتتكلم أوراق الأنماط، إذا كُتبت جيداً، بوحدة rem. والفجوة بين اللغتين هي حيث تقع هذه الصفحة: تكتب مقاساً بالبكسلات وتقرؤه بوحدة rem، ليعني الرقم الذي تضعه في CSS ما قصده المصمم. وتحويل px إلى rem فعل صغير، لكنه يُنجز مئات المرات في عمر موقع، وأساس خاطئ يحوّل تخطيطاً دقيقاً إلى تخطيط خاطئ قليلاً في كل مكان دفعة واحدة.

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

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

الصيغة والأساس

rem تساوي px مقسومة على الأساس

الصيغة قسمة واحدة: rem = px ÷ الأساس. فبالأساس المعتاد 16 px يصير المقاس 24 px إلى 1.5 rem، و32 px إلى 2 rem، و8 px إلى 0.5 rem. وتعرض الصفحة النتيجة وأنت تكتب، وتعرض الأساس الذي استعملته، فالسطر 24 px = 1.5 rem (16 px) يخبرك بالضبط بما افتُرض.

من أين تأتي الـ16

يبدأ الأساس عند 16 px لأن هذا ما يستعمله المتصفح حين لا يقول أحد غير ذلك. وليس قانوناً من قوانين الويب؛ بل هو افتراضي الافتراضيات، وقد ظل مستقراً عقوداً. فإذا كان CSS عندك لا يمس حجم خط الجذر فإن 1 rem تساوي 16 px لمعظم الزوار. وإذا مسّه فالأساس هو ما ضبطته.

حيلة الـ62.5% ولماذا يستعملها الناس

تضبط بعض أوراق الأنماط حجم الجذر على 62.5%، وهذا يجعل 1 rem تساوي 10 px في متصفح افتراضي، فتكون 24 px ببساطة 2.4 rem ويسهل الحساب في الرأس. وهي تنجح، لكن لها كلفة: صارت الصفحة كلها تعتمد على تلك النسبة، وأي مكوّن يتوقع 16 أساساً سيخرج أصغر من اللازم. فإذا كان مشروعك يفعل هذا فاكتب 10 في حقل الأساس في هذه الصفحة، وسيطابق كل رقم CSS عندك.

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

يحفظ النسبة

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

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

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

التقريب

القسمة على 16 تعطي نتائج نظيفة لمقاسات شائعة كثيرة (16 و24 و32 و48 و64) وكسوراً عشرية دورية لأخرى (10 px تساوي 0.625 rem؛ و13 px تساوي 0.8125). وتعطي الصفحة من الأرقام ما يحتاج إليه الرقم، وأنت تقرر كم تحتفظ به في ورقة الأنماط. وتتعامل المتصفحات مع الكسور الطويلة دون مشكلة، لكن قيمة مقرّبة مثل 0.8125rem أسهل قراءة وصيانة من قيمة بعشر خانات.

مقاسات شائعة

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

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

سلم مبني على rem

من العادات المفيدة اختيار مجموعة صغيرة من قيم rem وإعادة استعمالها: 0.5 و1 و1.5 و2 و3 و4 للتباعد، و0.875 و1 و1.25 و1.5 و2 للحرف. ويسمي المصممون هذا سلماً، وهو يُبقي الموقع متسقاً بصرياً. وحين يعطيك نموذج أولي قيمة غريبة مثل 22 px، استعمل المحوّل لترى أنها 1.375 rem، ثم قرر هل تقرّب إلى أقرب قيمة على سلمك.

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

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

أدخل المقاس بالبكسلات في الحقل الأول. والكسور العشرية مقبولة، فـ13.5 px تعمل مثل 14.

افحص الأساس

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

انسخ قيمة rem

اقرأ الرقم واستعمله في CSS، مع كتابة الوحدة بعده: font-size: 1.5rem. ولا تنسَ الوحدة، فالرقم المجرد يعني شيئاً آخر في معظم الخصائص.

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

بكسل CSS ليس بكسل شاشتك

حين لم تعد للشاشات كثافة متوقعة، صارت صفحة تُقاس بالبكسلات الحقيقية صفحة تتقلص كلما صارت الشاشات أحد. فأُعيد تعريف بكسل CSS طولاً مرجعياً: نحو 1/96 من البوصة عند مسافة قراءة مريحة. وكل ما عداه في هذه الصفحة مبني على ذلك. أما em فأقدم من الويب: ففي الحروف المعدنية كانت عرض كتلة مصبوبة، سُميت نسبة إلى الحرف الكبير M، وفي CSS تعني حجم الخط السارية، ولهذا تتغير كلما تداخلت العناصر. وأُضيفت rem للإفلات من هذا بالضبط: هي em للعنصر الجذر ولا تتضاعف أبداً.

لماذا توجد rem

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

أين تقابل rem عملياً

الحرف

نص الجسم هو عادة 1 rem، والعناوين من 1.25 إلى 3 rem، والحرف الصغير من 0.75 إلى 0.875 rem. وكتابتها بوحدة rem تتيح للقارئ تكبير الصفحة كلها بتغيير إعداد واحد في المتصفح.

التباعد والتخطيط

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

استعلامات الوسائط

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

ما ينبغي تركه بالبكسلات

الحدود الرفيعة جداً والظلال والأيقونات الرفيعة تبدو غالباً أفضل بمقاسات بكسل ثابتة، لأن حداً من 0.0625rem ينمو إلى 0.1rem مع النص الكبير لا يفيد أحداً. استعمل rem لما ينبغي أن يتحجم وبكسلات لما لا ينبغي.

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

نسيان أن الأساس ليس 16 دائماً

إذا ضبط مشروع html { font-size: 62.5% }، أو استعمل حجم جذر مرناً، فالعامل مختلف. افحص ورقة الأنماط قبل أن تثق برقم من أي محوّل، بما في ذلك هذا.

تحويل حجم الجذر نفسه

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

استعمال rem داخل مكوّن يضبط حجم خطه الخاص

تشير rem دائماً إلى الجذر، لا إلى المكوّن. وزر بحجم خط 14 px وحشو 1rem حشوه لا يتبع نص الزر نفسه. وإذا كنت تريد تباعداً يتبع نص العنصر فتلك مهمة em.

خلط الوحدات دون خطة

ورقة أنماط تستعمل px لهامش وrem للتالي وem لثالث يصعب الاستدلال فيها. اختر قاعدة: rem للحرف والتباعد، والبكسلات للحدود والظلال، والتزم بها.

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

كم rem تساوي 16 px؟

واحدة، على متصفح افتراضي. ستة عشر مقسومة على أساس ستة عشر.

هل rem أفضل من px؟

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

لماذا تختلف نتيجتي عن موقع آخر؟

على الأرجح أساس مختلف. افحص الحقل: بعض الأدوات تفترض 10 وبعضها 16 وبعضها 14. وتعرض هذه الصفحة الأساس بجانب النتيجة.

هل يجب أن أقرّب؟

لا. تقبل المتصفحات الكسور الطويلة. قرّب للقراءة فقط.

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

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

كيف أعود؟

بـمن rem إلى px، الذي يضرب بدل القسمة.

الاختيار بحكمة حين تحوّل px إلى rem

قرّر أساساً للمشروع والتزم به

أياً كان ما تختاره فاجعله قراراً واكتبه في توثيق المشروع. والفريق الذي يختلف على الأساس ينتج مكوّنات لا تتلاءم معاً.

حوّل في مرحلة التصميم، لا في اللحظة الأخيرة

إذا حوّلت px إلى rem وأنت تقرأ النموذج الأولي فإنك تبني السلم في التصميم وتلاحظ القيم الغريبة مبكراً. وإذا فعلت ذلك في النهاية فستكتشفها كومة أرقام غير متسقة.

فكّر في وحدات نافذة العرض أيضاً

للعناوين التي يجب أن تملأ الشاشة يعبّر من px إلى vw عن مقاس بحصة من نافذة العرض. وهو يتحجم بشكل مختلف عن rem، وكثيراً ما يُجمع بين الاثنتين.

عادات تسهّل تحويل px إلى rem

احتفظ بجدول تحويل في رأسك

بأساس 16 تغطي بضع نقاط ارتكاز معظم العمل: 4 px تساوي 0.25 rem، و8 px تساوي 0.5، و12 px تساوي 0.75، و16 px تساوي 1، و24 px تساوي 1.5، و32 px تساوي 2. وحين يعطيك نموذج أولي قيمة بين هذه تستطيع أن تقدّر قبل أن تحوّل px إلى rem في الصفحة، وتستعمل المحوّل للتأكيد فقط. وبعد بضعة أسابيع ستعرف الجدول دون نظر.

دع نظام التصميم يؤدي العمل

إذا كان فريقك يحتفظ برموز تصميم، مثل spacing-2 أو font-lg، فخزّنها بوحدة rem مرة واحدة، ودع الجميع يشيرون إلى الأسماء. وعندئذ لا يحتاج أحد إلى أن يحوّل px إلى rem ثانية، ويُجرى تغيير السلم في مكان واحد. والمحوّل هو الأداة التي تستعملها حين تكتب الرموز، لا حين تستعملها.

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

سطر مثل padding: 1.25rem; /* 20px */ يكلف بضعة أحرف ويوفر على المطور التالي أن يمد يده إلى حاسبة. وهو يسجل أيضاً أي أساس افترضت، وهذا يفيد إذا تغير حجم الجذر لاحقاً.

اختبر بإعداد متصفح مغيَّر

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

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

تغطي عائلة الأدوات نفسها التحويلات المجاورة. وللعودة إلى البكسلات استعمل من rem إلى px. وللمقاسات النسبية إلى العنصر توجد من px إلى em ومن em إلى px، وللمقاسات النسبية إلى الشاشة من px إلى vw ومن vw إلى px. وإذا كان عملك يشمل الألوان كما المقاسات فتتعامل من HEX إلى RGB ومن RGB إلى HEX ومن HEX إلى HSL مع صيغ ورقة الأنماط.

مثال محلول

لنقل إن نموذجاً أولياً يعطي عنوان بطاقة بحجم 28 px، وحشو بطاقة 20 px، وفراغاً 12 px بين البطاقات، ومشروعك يستعمل الأساس الافتراضي 16 px. تكتب 28 فتقرأ 1.75 rem، وتكتب 20 فتقرأ 1.25 rem، وتكتب 12 فتقرأ 0.75 rem. وفي ورقة الأنماط تكتب font-size: 1.75rem وpadding: 1.25rem وgap: 0.75rem. وزائر يرفع حجم نص المتصفح إلى 20 px يرى البطاقة نفسها، مكبَّرة بالربع: العنوان 35 px والحشو 25 px والفراغ 15 px، كلها متناسبة. ولو كنت كتبت بكسلات لبقي العنوان عند 28 ولبدت البطاقة خاطئة.

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

قبل التحويل

اعرف الأساس الذي يستعمله CSS عندك. وقرر أي المقاسات ينبغي أن تتحجم وأيها لا.

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

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

بعد التحويل

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

أخطاء شائعة

افتراض أن 1 rem دائماً 16 px

إنها كذلك فقط حين لا يكون أحد قد غيّر حجم الجذر، وقد غيّره بعض القراء. اكتب التخطيط ليعمل بأحجام أخرى أيضاً.

ضبط حجم الجذر بالبكسلات

إنه يتجاوز اختيار القارئ. استعمل نسبة مئوية، أو لا تضبطه.

تحويل كل شيء

ليس كل مقاس ينبغي أن يتحجم. اترك الحدود والظلال بالبكسلات.

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

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

الخلاصة

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