تحويل px إلى em Pixels ↔ Em مجاناً عبر الإنترنت آمن
اكتب قيمةً بـpx فتقرأها في الحال بـem. يجري الحساب داخل متصفحك، ولا يُرسَل شيء إلى أي مكان، وما يتوقف عليه الجواب مكتوبٌ أدناه لا مفترَض.
لا رفع لأي ملف
مقاسات شائعة — تحويل px إلى em
| px | em |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
من أين جاءت هذه الوحدات
البكسل في CSS ليس بكسل شاشتك. فلما لم تعد كثافة الشاشات أمراً يمكن توقّعه، صارت الصفحة المقيسة بالبكسلات الحقيقية صفحةً تتقلّص كلما ازدادت الشاشات دقة؛ فأُعيد تعريف بكسل CSS طولاً مرجعياً: نحو جزءٍ من ستة وتسعين من البوصة، منظوراً إليه من مسافة قراءةٍ مريحة. وكل ما عداه في هذه الصفحة مبنيٌّ عليه. والـem أقدم من الوِب — ففي الحروف الرصاصية كان عرض قالبٍ مصبوب، سُمِّي بحرف M الكبير — وهو في CSS حجم الخط النافذ، ولذلك يتغير كلما عشَّشتَ العناصر بعضها في بعض. وأُضيف الـrem للإفلات من ذلك بعينه: فهو em العنصر الجذر ولا يتراكم أبداً. وجاء الـvw مع التصميم المستجيب: جزءٌ من مئة من عرض نافذة العرض، مهما كان ذلك العرض.
أين تصادفها
هذه وحدات كل صحيفة أنماط. فالبكسلات تحدد مقاسات الحدود والظلال وكل ما لا ينبغي أن يتمدد؛ والـrem يحدد الخط والتباعد والتخطيط، فتكفي تغييرةٌ واحدة عند الجذر لإعادة مقاس واجهةٍ بأكملها؛ والـem يحدد ما ينبغي أن يتبع نصَّه، كالحشو داخل زر؛ والـvw يحدد العناوين والمقدمات التي يجب أن تملأ الشاشة على أي جهاز. والتحويل بينها هو حساب كل يوم حين يُحوَّل تصميمٌ سُلِّم بالبكسلات إلى صحيفة أنماطٍ تتمدد.
أسئلة متكررة
لماذا 16 بكسل نقطةُ البدء المعتادة؟
لأنها حجم النص الافتراضي في كل المتصفحات الكبرى، وصحيفةُ الأنماط التي لا تتجاوزه ترثه. فالـrem الواحد يساوي إذن 16 بكسل عند الإعداد الافتراضي، ومن هنا جاءت التحويلات المألوفة: 0٫5 rem هي 8 بكسل، و1٫5 rem هي 24 بكسل. فإن كبّر المستخدم القيمة الافتراضية في إعدادات متصفحه، كبرت معها القيم نفسها بالـrem — وهذا بعينه مغزى استعمالها.
أأستعمل rem أم em؟
الـrem لكل ما ينبغي أن يتبع الصفحة كلها — سُلّم الخط والتباعد وعروض التخطيط — لأنه يُقاس من الجذر ولا يتراكم قط. والـem لكل ما ينبغي أن يتبع النص الذي يقع فيه: حشو زر، والفجوة بجانب أيقونة، وإزاحة اقتباس. والخطأ الشائع تعشيشُ عناصر مقيسةٍ بالـem بعضها في بعض، فيصير 1٫2 em داخل 1٫2 em مقدارَ 1٫44، ثم 1٫73، حتى يغدو النص في أسفل الصفحة ضعفَ الحجم المقصود.
هل الجواب دقيق؟
حيث تُعرَّف الوحدتان إحداهما بالأخرى بأعداد صحيحة، نعم — وتقول الصفحة ذلك فوق الرقم، والتقريب الوحيد في عدد المنازل المعروضة. وحيث لا تكون النسبة عشرية منتهية، تعرض الصفحة اثنتي عشرة رقماً معنوياً وتقول إن العلاقة تقريبية، بدل أن تدّعي غير ذلك.
هل يغادر جهازي شيءٌ مما أكتبه؟
لا. الحساب يجري في متصفحك؛ لا يُرفَع شيء، ولا خادم أصلاً ليُرفَع إليه. حمِّل الصفحة مرة واحدة وتبقى تعمل والشبكة مطفأة.
لماذا تحوّل px إلى em
الـem هي أقدم وحدة نسبية في CSS وأكثرها إثارة للجدل. عندك مقاس بالبكسلات من ملف تصميم، 20 px من الحشو على زر، و14 px من المسافة بجانب أيقونة، و36 px لعنوان، وتريده بوحدة em، ليتبع النص الذي ينتمي إليه. وحين تحوّل px إلى em فإنك تطرح سؤالاً معيناً: ما مضاعف حجم الخط الحالي هذا؟ والجواب يعتمد على رقم لا تستطيع الصفحة تخمينه، هو حجم الخط السارية حيث تُستعمل القيمة، ولذلك يضع المحوّل ذلك الرقم في حقل ويستعمله علناً.
سبب كتابة المقاسات بوحدة em أن الأشياء التي تنتمي إلى النص ينبغي أن تنمو معه. فالحشو داخل زر ينبغي أن يكون أكبر حين تكون تسمية الزر أكبر. والفراغ بين أيقونة وتعليقها ينبغي أن يتسع حين يتسع التعليق. وهامش سفلي لعنوان ينبغي أن يبقى متناسباً مع العنوان. وفي كل هذه الحالات تكون قيمة البكسل خاطئة بمجرد أن يتغير حجم الخط، وقيمة em صحيحة عند أي حجم. وهذه هي الحجة كلها لـem، وهي قوية.
يجري الحساب في متصفحك، ولا شيء يُرفع. وستجد أدناه الصيغة، وسبب حاجة em إلى عناية أكبر من rem، وفخ التداخل الذي ينتج مقاسات مفاجئة، والأماكن التي تكون فيها em الوحدة الصحيحة، وطريقة للاختيار بين em وrem في ورقة أنماط حقيقية.
الصيغة والأساس
em تساوي px مقسومة على حجم الخط
الصيغة قسمة واحدة: em = px ÷ الأساس. فبأساس 16 px تصير القيمة 24 px إلى 1.5 em، و8 px إلى 0.5 em، و20 px إلى 1.25 em. وتعرض الصفحة الأساس بجانب النتيجة، كما في 24 px = 1.5 em (16 px)، لترى ما الذي افتُرض. والحساب هو نفسه لـrem. أما المعنى فمختلف.
ما الأساس
بالنسبة إلى rem، الأساس هو حجم خط العنصر الجذر. وبالنسبة إلى em، هو حجم خط العنصر الذي تُستعمل فيه القيمة، أو، لخاصية font-size نفسها، حجم خط الأب. ولهذا ليس لـem جواب واحد: فقيمة ورقة الأنماط نفسها تعني مقاسات بكسل مختلفة في أماكن مختلفة. فإذا كنت تحوّل حشواً لزر نصه 14 px فاكتب 14 أساساً. وإذا كنت تحوّل هامشاً لعنوان بحجم 32 px فاكتب 32.
الافتراضي حين لا تعرف
إذا كنت تريد رقماً تقريبياً فقط فاترك الأساس عند 16، حجم النص العادي في متصفح لم يغيره أحد. والنتيجة صحيحة لكتلة من نص الجسم العادي، وتعطيك إحساساً بالنسبة حتى لو تبين أن العنصر له حجم مختلف.
ما يحفظه التحويل وما لا يستطيعه
يحفظ النسبة إلى النص
النتيجة هي النسبة بالنسبة إلى حجم الخط السارية حيث تُستعمل القيمة. وإذا كُتبت بوحدة em فإن الفراغ ينمو ويتقلص مع النص بجانبه، وهذا بالضبط ما ينبغي أن يتصرف به التباعد حول الكلمات.
لا يستطيع إعطاءك رقماً واحداً للصفحة
هذا ما ينبغي الحذر منه. فـem نسبية إلى حجم خط العنصر نفسه، أو، لـfont-size، إلى أبيه، لا إلى الجذر. فلا يوجد جواب واحد للصفحة: إذ 1.5 em نفسها تساوي 24 px داخل عنصر من 16 px و36 px داخل عنصر من 24 px، وem داخل em تتضاعف. والرقم في الصفحة صحيح للأساس في الحقل ولا شيء غيره. وإذا كنت تريد رقماً واحداً يصح في كل مكان فهذا ما تصلح له rem. وللمقارنة حوّل px إلى rem وانظر كيف تتصرف قيمة البكسل نفسها.
التقريب
القسمة على 16 تعطي قيماً نظيفة لمقاسات كثيرة وكسوراً عشرية دورية لأخرى. وقيمة مثل 0.8125 em لا بأس بها في ورقة أنماط، لكن قد تفضل التقريب إلى 0.8 أو 0.85 إذا كان المقاس الدقيق لا يهم. وأبقِ الرقم الكامل حيث تهم الدقة.
فخ التداخل
كيف تتضاعف em
افترض أن لقائمة font-size: 0.875em ولعناصرها font-size: 0.875em أيضاً. فالقائمة 87.5% من أبيها. وكل عنصر 87.5% من القائمة، أي نحو 76.6% من الأب. وقائمة متداخلة داخل عنصر تتقلص ثانية، إلى نحو 67%. وبعد ثلاثة مستويات يصير النص صغيراً جداً، ولم يكتب أحد ذلك عن قصد. وهذا ما يُقصد بقولنا إن em تتضاعف.
لماذا يهم حين تحوّل px إلى em
إذا حوّلت قيمة بكسل إلى em لـfont-size فإن الأساس الذي يجب أن تستعمله هو حجم خط الأب، لا حجم العنصر نفسه. وكثير من الأخطاء ينتج من استعمال الخطأ. وللخصائص الأخرى، مثل الحشو والهامش، الأساس هو حجم خط العنصر نفسه. والقاعدة سهلة القول وسهلة النسيان: font-size ينظر إلى الأعلى، وكل ما عداه ينظر إلى نفسه.
كيف تتجنب المفاجآت
استعمل em للتباعد الذي يتبع النص، وrem لأحجام الخطوط. وبهذه الطريقة لا تتضاعف أحجام الخطوط أبداً، لأنها تشير إلى الجذر، ويظل التباعد يتبع نصه. وهي التركيبة التي تستقر عليها معظم أوراق الأنماط الحديثة.
مقاسات شائعة
الجدول في أسفل الصفحة
تحت المحوّل جدول بمقاسات شائعة بالأساس الذي تضبطه: 8 px تساوي 0.5 em، و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. وبأساس 16 تكون هذه هي الأرقام نفسها لـrem، ولهذا يخلط الناس بينهما. والفرق في ما تمثله الـ16.
تغيير الأساس ليطابق العنصر
إذا ضبطت الأساس على 14 لزر صغير يتغير الجدول: 14 px صارت 1 em، و7 px صارت 0.5 em، و21 px صارت 1.5 em. جرّب ذلك وسترى كيف أن حشواً من 1.5 em له مقاس بكسل مختلف في زر من 14 px عنه في زر من 18 px، ولماذا يفيد ذلك.
كيف تحوّل px إلى em هنا
اكتب قيمة البكسل
أدخل المقاس بالبكسلات في الحقل الأول. والكسور العشرية مقبولة.
اضبط حجم الخط الذي تشير إليه em
اكتب حجم خط العنصر، أو حجم خط أبيه إذا كنت تحوّل font-size. وإذا لم تكن متأكداً فاترك 16 واعتبر النتيجة تقريباً.
انسخ قيمة em
استعمل الرقم في CSS بوحدته، كما في padding: 1.25em. فالرقم بلا وحدة غير صالح لمعظم الخصائص.
من أين تأتي هذه الوحدات
الـem في الحروف المعدنية
الـem أقدم من الويب. ففي الحروف المعدنية كانت عرض كتلة مصبوبة، سُميت نسبة إلى الحرف الكبير M، وكانت الوحدة الطبيعية للمسافة الأفقية على السطر المطبوع. ولا يزال الطباعون يتحدثون عن شرطات em ومسافات em. وفي CSS تبقى الفكرة بشكل أكثر مرونة: em واحدة هي حجم الخط الحالي.
البكسل والـrem
بكسل CSS طول مرجعي يساوي نحو 1/96 من البوصة عند مسافة قراءة مريحة، لا نقطة على شاشتك. وأُضيفت rem لتعطي المطورين وحدة نسبية لا تتضاعف أبداً: هي em للعنصر الجذر. وبينها، تغطي البكسل وem وrem الحاجات الثلاث: مقاس ثابت، ومقاس نسبي إلى النص، ومقاس نسبي إلى الصفحة.
حيث تكون em الخيار الصحيح
الحشو داخل الأزرار وحقول النماذج
زر بـpadding: 0.5em 1em يبدو متناسباً بالطريقة نفسها عند أي حجم نص. كبّر التسمية فيكبر الزر كله معها، وهذا ما تريده من مكوّن قد يُستعمل في شريط أدوات وفي لافتة رئيسية.
التباعد بجانب الأيقونات
أيقونة يتبعها تعليق تحتاج إلى فراغ يتحجم مع التعليق. وهامش 0.4em يفعل ذلك؛ وهامش 6px لا يفعل.
الهوامش حول العناوين والفقرات
يسهل الحفاظ على الإيقاع العمودي في مستند حين يكون تباعد الفقرات بوحدة em، لأنه يتبع حجم الفقرة. وهامش العنوان بوحدة em يبقى متناسباً حين يتغير حجم العنوان عند نقاط انكسار مختلفة.
استعلامات الوسائط
نقاط الانكسار المكتوبة بوحدة em تستجيب لحجم نص القارئ، فيتحول التخطيط إلى شكله الضيق أبكر لمن كبّر نصه. وفي استعلامات الوسائط تشير em إلى الافتراضي في المتصفح لا إلى أي عنصر، فلا تتضاعف.
أفخاخ حين تحوّل px إلى em
استعمال الأساس الخطأ
الخطأ الأكثر شيوعاً. لـfont-size استعمل حجم الأب؛ ولكل ما عداه، حجم العنصر نفسه. تحقق أي خاصية تحوّل قبل أن تكتب الأساس.
نسيان أن الأب قد يكون بوحدة em أيضاً
إذا كان حجم خط الأب نفسه بوحدة em فعليك أن تتبع السلسلة صعوداً لتعرف الحجم الحقيقي. وحين تتعقد ورقة الأنماط حوّل أحجام الخطوط إلى rem وأبقِ em للتباعد.
توقع رقم واحد لمكوّن كامل
المكوّن الذي يحوي نصاً بأحجام مختلفة ليست لأجزائه قيمة em واحدة. حوّل كل جزء بالنسبة إلى أساسه.
خلط em وrem للخاصية نفسها
حشو 1rem بجانب هامش 1em أمر مشروع وكثيراً ما يربك. اختر قاعدة، مثل rem لأحجام الخطوط وem للتباعد، والتزم بها.
أسئلة يطرحها الناس قبل التحويل
كم em تساوي 16 px؟
واحدة، إذا كان حجم الخط السارية 16 px. وإذا كان حجم خط العنصر 20 px فإن 16 px تساوي 0.8 em.
هل em أفضل من rem؟
لا أحد منهما أفضل. rem أفضل لأحجام الخطوط والتخطيط العام. وem أفضل للتباعد الذي ينبغي أن يتبع نصه.
لماذا حشوي أكبر مما توقعت؟
لأنه نسبي إلى حجم خط العنصر، الذي قد يكون أكبر مما افترضت. افحص حجم الخط المحسوب في أدوات المطور في المتصفح.
هل أستطيع استعمال الكسور العشرية؟
نعم. قيم مثل 0.625em و1.333em عادية.
هل يُرفع رقمي؟
لا. يجري الحساب في متصفحك ولا يُرسل شيء إلى أي مكان.
كيف أعود؟
بـمن em إلى px، الذي يضرب بدل القسمة.
الاختيار بحكمة حين تحوّل px إلى em
قرّر إلى ماذا تنتمي القيمة
إذا كانت تنتمي إلى النص فem صحيحة. وإذا كانت تنتمي إلى الصفحة، مثل عرض عمود أو فراغ قسم، فrem أو وحدة نافذة العرض أنسب. ومن px إلى vw يعبّر عن مقاس بحصة من عرض الشاشة.
اكتب القصد في تعليق
سطر مثل padding: 0.75em 1.25em; /* 12px 20px at 16px */ يجعل المنطق مرئياً. وحين يتغير حجم الخط لاحقاً ستعرف ما كان المقصود من الأرقام.
أبقِ حجم خط المكوّن في مكان واحد
اضبط حجم الخط على العنصر الجذر للمكوّن ودع كل ما بداخله يشير إليه. فتعني قيم em بداخله الشيء نفسه في كل مكان في المكوّن، وتستطيع أن تحوّل px إلى em مقابل أساس واحد.
عادات جيدة حين تحوّل px إلى em
حوّل px إلى em مكوّناً مكوّناً
لا تحاول أن تحوّل px إلى em لورقة أنماط كاملة دفعة واحدة. خذ مكوّناً واحداً، مثل بطاقة أو زر، وقرّر حجم خطه، وحوّل كل قيمة تباعد فيه مقابل ذلك الحجم. وحين يكتمل المكوّن اختبره عند حجمي نص أو ثلاثة. ثم انتقل إلى التالي.
استعمل حاسبة للقيم الغريبة، لا المستديرة
قيم مثل 8 و16 و24 بكسل تتحول إلى أرقام em أنيقة بأساس 16. أما القيم الغريبة مثل 22 أو 13 فتعطي كسوراً عشرية طويلة. وحين تحوّل px إلى em لهذه، قرّر هل يحتاج التصميم فعلاً إلى الرقم الدقيق أو هل قيمة em المستديرة الأقرب ستكون جيدة بالقدر نفسه. وكثيراً ما يرضى المصممون بالتقريب، وورقة أنماط مرتبة أسهل في الصيانة.
احتفظ بسجل للأساس
تعليق قصير بجانب كل قيمة em، يقول ما كان الأساس، يساعد الشخص التالي. وإذا غيّر أحدهم لاحقاً حجم خط المكوّن فسيعرف أن التباعد يتبعه بالتصميم لا بالمصادفة. وكتابة ذلك مرة واحدة تستحق الوقت الذي تستغرقه.
قارن بما يقابله في rem
إذا لم تكن متأكداً هل em أو rem تلائم قيمة، فحوّل px إلى em وإلى rem واسأل ماذا ينبغي أن يحدث حين يتغير حجم النص. فإذا كان ينبغي أن تتبع القيمة نص العنصر نفسه فخذ em. وإذا كان ينبغي أن تتبع الصفحة فخذ rem.
محوّلات ذات صلة
تغطي عائلة الأدوات نفسها التحويلات المجاورة. وللعودة إلى البكسلات استعمل من em إلى px. وللمقاسات النسبية إلى الجذر توجد من px إلى rem ومن rem إلى px، وللمقاسات النسبية إلى الشاشة من px إلى vw ومن vw إلى px. ولألوان ورقة الأنماط نفسها تتعامل من HEX إلى RGB ومن HEX إلى HSL مع الصيغ.
مثال محلول
لنقل إن تسمية زر 14 px وإن التصميم يعطي الزر 10 px من الحشو العمودي و20 px من الحشو الأفقي. تكتب 14 أساساً، و10 فتقرأ 0.714 em، و20 فتقرأ 1.429 em. وفي ورقة الأنماط تكتب padding: 0.714em 1.429em. وحين يُستعمل الزر نفسه في لافتة رئيسية بتسمية من 18 px يصير الحشو 12.9 px و25.7 px، متناسباً. ولو كنت كتبت 10px و20px لبدا الزر نحيلاً حول النص الأكبر.
قائمة تحقق قصيرة
قبل التحويل
قرّر إلى أي خاصية تنتمي القيمة، وجد حجم الخط الذي ينبغي أن تكون نسبية إليه.
أثناء التحويل
اكتب قيمة البكسل والأساس الصحيح، وانسخ رقم em بوحدته.
بعد التحويل
غيّر حجم خط المكوّن في المتصفح وتحقق أن التباعد يتبعه. وابحث عن قيم em متداخلة تتضاعف.
أخطاء شائعة
استعمال حجم الجذر أساساً للحشو
هذه مهمة rem. أما em فتشير إلى حجم خط العنصر نفسه.
استعمال em لكل حجم خط
أحجام خطوط em المتداخلة تتضاعف وتفاجئك. استعمل rem لأحجام الخطوط.
التقريب إلى رقم أنيق بصرياً لكنه خطأ
1.43 ليست كـ1.5 حين تُضرب في خط كبير. أبقِ أرقاماً كافية.
أرقامك تبقى على جهازك
يجري الحساب محلياً. يستعمل متصفحك أنت قيمك ولا يُرسل شيء إلى أي مكان. لا شيء تحذفه بعد ذلك ولا حساب تنشئه. هذه هي الطريقة البسيطة لتحويل px إلى em.
الخلاصة
لتحويل px إلى em هنا اكتب المقاس بالبكسلات وحجم الخط الذي يُنسب إليه، واقرأ النتيجة فوراً، بالصيغة em = px ÷ الأساس. يحفظ التحويل النسبة إلى حجم الخط السارية حيث تُستعمل القيمة. ولا يستطيع إعطاء جواب واحد للصفحة: فـem نسبية إلى حجم خط العنصر نفسه، أو الأب لـfont-size، فـ1.5 em نفسها تساوي 24 px داخل عنصر من 16 px و36 px داخل عنصر من 24 px، وem داخل em تتضاعف. ولرقم واحد يصح في كل مكان استعمل rem. ولا شيء يُرفع.