ما هو محول EM إلى PX؟
يقوم محول EM إلى PX بتحويل وحدات em في CSS إلى بكسلات مطلقة. في CSS تُعدّ em وحدة نسبية، حيث تساوي 1em حجم خط العنصر الأب (أو حجم خط العنصر نفسه في الخصائص غير المرتبطة بالخط). وبما أن المتصفحات تعتمد افتراضيًا على حجم خط جذري يبلغ 16px، فإن 1em تساوي عادةً 16px — لكن القيمة الدقيقة تتوقف على حجم الخط الأساسي الذي تختاره.
كيفية الاستخدام
أدخل قيمة em التي تريد تحويلها، ثم أدخل حجم الخط الأساسي بالبكسل. تعتمد معظم المتصفحات افتراضيًا على 16px، لذا تكون هذه القيمة مُعبّأة مسبقًا. اضغط على زر الحساب لرؤية القيمة المكافئة بالبكسل. وهذا مفيد عند مطابقة مواصفات التصميم المُعطاة بالبكسل مع أوراق الأنماط المكتوبة بوحدة em.
شرح المعادلة
التحويل عملية ضرب بسيطة:
$$\text{PX} = \text{EM value} \times \text{Base font size (px)}$$على سبيل المثال، 1.5em بحجم أساسي 16px تساوي \(1.5 \times 16 = 24\text{px}\). وللتحويل في الاتجاه المعاكس، اقسم البكسل على الحجم الأساسي: \(\text{px} \div \text{الحجم الأساسي} = \text{em}\).
مثال تطبيقي
لنفترض أن عنوانًا مضبوط على 2.5em وحجم الخط الأساسي هو 16px. عندئذٍ يكون الحجم بالبكسل \(2.5 \times 16 = 40\text{px}\). أما لو كان الحجم الأساسي 18px بدلاً من ذلك، فإن نفس القيمة 2.5em ستُعرض بحجم \(2.5 \times 18 = 45\text{px}\) — مما يوضّح كيف تتغير em تبعًا للحجم الأساسي.
الأسئلة الشائعة
هل تساوي 1em دائمًا 16px؟ فقط عندما يكون حجم الخط الأساسي هو القيمة الافتراضية للمتصفح وهي 16px. أما إذا اختلف حجم خط العنصر الأب أو الجذر، فإن قيمة 1em تتغير تبعًا لذلك.
ما الفرق بين em و rem؟ تُحسب rem دائمًا نسبةً إلى حجم خط الجذر (html)، بينما تُحسب em نسبةً إلى أقرب سياق لحجم الخط، وهو ما قد يتدرّج ويتراكم.
لماذا نستخدم em بدلاً من px؟ تتغير وحدات em مع تفضيلات المستخدم لحجم الخط، مما يحسّن إمكانية الوصول ويجعل صيانة الطباعة المتجاوبة أسهل.
