تحويل em إلى بكسل
مع خط أب بحجم 16 بكسل تساوي 1.5em ما مقداره 24 بكسل، ومع 20 بكسل تصبح القيمة نفسها 30 بكسل. أدخل قيمة em وحجم خط العنصر الأب لترى الطول الحقيقي بالبكسل لهامش أو عنوان. مجانية في متصفحك.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
مثال محلول
- القيمة بوحدة em
- 1.5
- حجم خط العنصر الأب (px)
- 16
- البكسلات
- 24
- قيمة CSS
- 24px
- الدقة
- 6
توضح حاسبة التحويل من em إلى البكسل الطول الفعلي بالبكسلات الذي تمثله قيمة CSS نسبية بوحدة em عند حجم خط محدد للعنصر الأب. أدخلوا قياس em وحجم الخط المحسوب للعنصر الأب بالبكسلات، فتضرب الحاسبة القيمتين وتعيد قيمة مستقرة وقياس CSS سهل القراءة. تفيد الأداة في مراجعة الطباعة والمسافات وأبعاد المكونات والواجهات المتجاوبة التي تتغير أحجامها تبعاً لإعدادات النص الموروثة.
فهم ما يمثله القياس بوحدة em
وحدة em هي طول نسبي في CSS يعتمد حجمه الظاهر على السياق الطباعي. في خصائص كثيرة، تعادل em واحدة حجم الخط المحسوب للعنصر الذي تُستخدم عليه الخاصية؛ وعند الاستدلال انطلاقاً من إعداد موروث أو من العنصر الأب، يوفر حجم خط الأب المدخل مرجعاً عملياً للمعاينة. لذلك لا تشير قيمة em إلى عدد ثابت ودائم من البكسلات.
فإذا كان المرجع ستة عشر بكسلاً، تساوي em واحدة ستة عشر بكسلاً، وتساوي em ونصف أربعاً وعشرين بكسلاً. وإذا كان المرجع عشرين بكسلاً، تصبح القيمتان النسبيتان نفسيهما عشرين وثلاثين بكسلاً. تكشف هذه الحاسبة تلك العلاقة بدلاً من افتراض القيمة الافتراضية للمتصفح خفية.
كما تعرض الصيغة لتيسير التدقيق. لا تفحص الأداة صفحة ويب، ولا تحل تدرج الأنماط، ولا تحمل أوراق الأنماط، ولا تخمن أي عنصر سلف يتحكم في الخاصية.
حساب البكسلات والتحكم في التقريب
يجب أن تكون القيمتان الإلزاميتان عددين محدودين، وأن يكون مرجع حجم الخط أكبر من الصفر، لأن حجم الخط المحسوب الصفري أو السالب لا يشكل أساساً ذا معنى لهذه المعاينة. تقبل قيم em الصفرية والسالبة: فالصفر مفيد في جداول رموز التصميم المولدة، بينما تكون الإزاحات والهوامش النسبية السالبة صالحة في تخطيطات CSS كثيرة. تُقرب نتيجة البكسل افتراضياً إلى ست منازل عشرية.
اضبطوا precision على عدد صحيح من صفر إلى اثني عشر عندما تتطلب بيانات اختبار أو مواصفات أو جداول مستوى مختلفاً من الدقة. لا تضعوا نص الوحدة داخل الحقول الرقمية: أرسلوا 1.25 بدلاً من 1.25em، و18 بدلاً من 18px.
معاينة الأحجام الفعلية في CSS وأعمال التصميم
يستطيع مطورو الواجهات استخدام التحويل عند مراجعة مكونات تتدرج مع الطباعة المحلية. قد يبدو زر ذو حشو أفقي قدره 1.25em متوازناً مع خط حجمه ستة عشر بكسلاً، لكنه يشغل عرضاً فعلياً مختلفاً داخل بطاقة ترث حجماً قدره ثمانية عشر بكسلاً. يجعل تحويل الحالتين الأثر واضحاً قبل فتح أدوات المتصفح.
ويمكن للمصممين تحويل رموز التصميم النسبية إلى ملاحظات بالبكسل من أجل التسليم من دون تغيير النظام الأصلي، كما يستطيع مراجعو إمكانية الوصول مقارنة النتائج الفعلية لإعدادات النص الموروث الأكبر. حافظوا على دقة النطاق. تحوّل هذه الحاسبة em إلى px فقط؛ فلا تنفذ التحويل العكسي، ولا تحل rem وفق العنصر الجذر، ولا تقيم النسب المئوية، ولا تحاكي تكبير المتصفح أو كثافة الشاشة.
تمثل النتيجة بكسلات CSS لا بكسلات الجهاز المادية. ولأن المسارين يستخدمان الخوارزمية النقية نفسها، يمكن نقل المثال المتحقق منه إلى مسار بناء من دون تغيير الحساب.
حالات الاستخدام
معاينة مسافات المكونات
اعرفوا مقدار الحشو أو الهامش بالبكسل الذي ينتجه رمز em عند حجم خط الأب الفعلي.
إعداد تسليم التصميم
أضيفوا ملاحظات محددة بالبكسل مع إبقاء قيم em النسبية في نظام التصميم.
إنشاء بيانات اختبار مستقرة
ولدوا أحجام بكسل متوقعة وحتمية للسمات واختبارات المكونات ووثائق CSS.
الأسئلة الشائعة
هل تساوي em واحدة دائماً ستة عشر بكسلاً؟
لا. يصح ذلك فقط عندما يكون مرجع الخط المعني ستة عشر بكسلاً. أدخلوا حجم خط الأب الفعلي.
هل يمكن تحويل قيمة em سالبة؟
نعم. قد تكون الإزاحات والهوامش النسبية السالبة صالحة في CSS، ولذلك تُقبل قيم em السالبة.
هل تمثل النتيجة بكسلات الجهاز المادية؟
لا. إنها تمثل بكسلات CSS. يحدد تكبير المتصفح وكثافة بكسلات الجهاز كيفية مطابقتها للبكسلات المادية.
ما حجم خط العنصر الأب الذي يجب إدخاله؟
أدخل حجم الخط المحسوب للعنصر الأب بالبكسل، مثل 18 إذا كانت بطاقة ترث هذا الحجم. لا تقرأ الأداة صفحتك ولا تخمّن أي عنصر يحدده، فأنت من يقدّم هذه القيمة.
هل تحوّل الأداة rem أو النسب المئوية أو البكسل إلى em؟
لا، فهي تحوّل من em إلى بكسل فقط. لا تحسب rem بالنسبة إلى العنصر الجذر ولا النسب المئوية ولا وحدات نافذة العرض، ولا تحاكي تكبير المتصفح أو كثافة الشاشة.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/str/em-to-px \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"em_value":1.5,"parent_font_size_px":16}'const res = await fetch("https://api.kit.forhosting.com/str/em-to-px", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"em_value": 1.5,
"parent_font_size_px": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/em-to-px",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"em_value": 1.5,
"parent_font_size_px": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/em-to-px", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"em_value":1.5,"parent_font_size_px":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"em_value":1.5,"parent_font_size_px":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/em-to-px", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"em_value": 1.5,
"parent_font_size_px": 16
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.em_to_px",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
يجري الحساب بصورة حتمية من دون شبكة أو تخزين أو عشوائية أو اعتماد على التاريخ، وتبلغ كلفة كل طلب API آلي $0.002.
فهم ما يمثله القياس بوحدة em
تكرر الاستجابة المدخلات، وتعيد العدد المحسوب في pixels، وتضيف css_value مثل 24px. أنتم تقدمون حجم الأب المحسوب سلفاً، ولذلك تكون النتيجة حتمية وملائمة لمراجعات التصميم والتوثيق والاختبارات ومسارات API.
حساب البكسلات والتحكم في التقريب
العملية هي أن pixels تساوي em_value مضروبة في parent_font_size_px. يؤثر التقريب في pixels وcss_value، بينما تظل المدخلات ظاهرة لضمان إمكانية التتبع. كذلك تحول الخوارزمية الصفر السالب إلى صفر عادي، فتمنع القيم المفاجئة في مقارنات JSON. تُرفض NaN وInfinity والحقول المفقودة والأنواع غير المدعومة والمقادير المفرطة والنتائج التي تتجاوز الحد برسالة invalid_input بدلاً من إنتاج رقم مضلل. يحافظ هذا العقد الصارم على اتساق جداول البيانات وSDK ونماذج الويب وبيانات اختبارات التكامل المستمر.
معاينة الأحجام الفعلية في CSS وأعمال التصميم
تفيد المخرجات أيضاً كبيانات اختبار: يمكن لمولد السمات استدعاء API وحفظ القيمة والتحقق من الأبعاد المتوقعة. يعمل الحساب التفاعلي داخل المتصفح، بينما تبلغ كلفة الطلب الآلي $0.002.
أسئلة تقنية
ما الصيغة التي تحول em إلى بكسلات؟
اضربوا قيمة em في حجم خط الأب ببكسلات CSS: pixels = em_value × parent_font_size_px.
كم تبلغ كلفة طلب API؟
تبلغ كلفة كل طلب آلي $0.002. أما الحساب التفاعلي داخل المتصفح فهو مجاني في هذه الصفحة.