محوّل px إلى rem
مع جذر قدره 16 px، تساوي 16 px قيمة 1 rem، وتساوي 0.5 rem قيمة 8 px. حوّل أطوال CSS بين البكسل وrem وفق حجم خط الجذر الذي تحدده ورقة الأنماط لديك، واحصل على قيمة جاهزة للصق مع الصيغة والخطوات. مجاني في متصفحك.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
مثال محلول
- القيمة
- 16
- من
- px
- إلى
- rem
- الأساس
- 16
- النتيجة
- 1 rem
- المحوَّل
- 1
- CSS
- 1rem
يحوّل محوّل px إلى rem طول CSS بالبكسل أو rem إلى الوحدة الأخرى مستخدماً حجم خط الجذر الذي تشحنه فعلاً. أدخل القيمة الرقمية، واختر from وto بين px أو rem، واضبط base على حجم خط الجذر (html) بالبكسل — وهو غالباً ستة عشر في متصفّحات سطح المكتب، وأحياناً أربعة عشر أو ثمانية عشر في أنظمة التصميم. تعيد الأداة المقدار المحوّل، وسلسلة css جاهزة للّصق مثل rem واحد أو ستة عشر px، والصيغة المستخدمة، والتعويض خطوةً بخطوة كي تبقى عُقد التصميم ومراجعات الكود متوافقةً. تحتاج ترحيلات السمات، وتدقيقات الخط المرن، والتسليم من Figma إلى CSS، وتدرّج خط الوصول، جميعها إلى حساب rem يساوي px على الجذر الحتمي ذاته دون فتح فاحص المتصفّح.
ماذا يعني px وrem في طباعة CSS
في CSS، طول البكسل (px) وحدة طول مطلقة تُستخدم في التخطيطات والحدود وعُقد الطباعة القديمة. أما طول rem فنسبي إلى حجم خط العنصر الجذر — وهو دائماً تقريباً عنصر html — فيساوي rem واحد أياً كان حجم خط الجذر ذاك بالبكسل. إن كان الجذر ستة عشر بكسلاً، فستة عشر px تساوي rem واحداً، واثنان وثلاثون px تساويان اثنين rem، وصفر فاصل خمسة rem تساوي ثمانية px.
تفضّل أنظمة التصميم rem لتدرّجات الخط والتباعد لأن المستخدمين الذين يكبّرون خط المتصفّح الافتراضي، أو يضبطون جذراً أكبر للوصول، يحصلون على نموّ متناسب دون تعقّب كل بكسل مثبّت بصلابة. ويهمّ التحويل بالاتجاه الآخر حين تظلّ مكتبة تُصدر عُقد px أو حين تُصدّر أداة تصميم أحجاماً بكسلية ثابتة وتحتاج إلى تصريحات rem تطابق جذر الإنتاج. التحويل نفسه أوّلي: rem يساوي px مقسوماً على base، وpx يساوي rem مضروباً في base، حيث base هو حجم خط الجذر بالبكسل.
ما يعثّر الفرق ليس الصيغة بل الأسس غير المتطابقة — افتراض ستة عشر بينما تضبط الورقة html على اثنين وستين فاصل خمسة بالمئة (عشرة px) أو على مئة واثني عشر فاصل خمسة بالمئة (ثمانية عشر px). تُجبر هذه الحاسبة الأساس على الظهور كي تطابق النتيجة دائماً المقياس الذي تدّعي استخدامه. تُرفض الأسس الصفرية وشبه الصفرية لأن القسمة على صفر ليست طول CSS صالحاً؛ وينبغي أن تتضمّن العروض الصفّية واختبارات الوحدة مسار الفشل ذاك كي لا يعامل العملاء rem خفيةً كلانهائي.
نصائح عملية وحدود وعمليات بحث ذات صلة
أبقِ value وbase داخل النطاق المطلق المنشور كي لا تفيض المنتجات إلى نتيجة غير منتهية يجب على الحلّال رفضها. فضّل إرسال أرقام لا سلاسل منسّقة مسبقاً حين تتحكّم بالعميل؛ فالأرقام النصّية تُقبل فقط حين تطابق نمطاً رقمياً منتهياً صارماً. وثّق حجم خط الجذر إلى جانب كل جدول عُقد: إن كان html يستخدم اثنين وستين فاصل خمسة بالمئة من افتراضي المستخدم، فالأساس عشرة px لافتراضي وكيل مستخدم بستة عشر بكسلاً، ويصبح عنوان بأربعة وعشرين px مساوياً لاثنين فاصل أربعة rem — لا واحد فاصل خمسة rem.
حين يساوي from قيمة to تعيد الأداة القيمة دون تغيير كي تطبّع الخطوط الوحدات دون حالة خاصة، لكن الأساس يظلّ مطلوباً ويُتحقّق منه كغير صفري. تستهدف هذه الصفحة الباحثين عن محوّل px إلى rem، أو حاسبة rem إلى px، أو أداة طباعة حجم خط جذر CSS؛ وهي ليست محوّل em نسبةً إلى عنصر أب، ولا مولّد clamp مرن، ولا حاسبة وحدات منفذ العرض.
فضّل هذه القدرة حين تعرف مسبقاً حجم الجذر بالبكسل وتحتاج فقط إلى تحويل الطول؛ وإن احتجت إلى أنماط محسوبة حيّة من صفحة حقيقية فاستخدم أدوات المتصفّح بدلاً منها. فحوص الرحلة الدائرية سهلة: حوّل px إلى rem وبالعكس بالأساس نفسه وأكّد القيمة الأصلية ضمن تقريب اثنتي عشرة منزلة عشرية نفسه.
حالات الاستخدام
جداول عُقد التصميم من بكسل Figma
صدّر أحجام التباعد والخط بالبكسل من أدوات التصميم، واضبط base على حجم خط جذر الإنتاج لديك، وأصدر عُقد rem تطابق ورقة الأنماط الحيّة.
ترحيل السمات من px إلى rem
حوّل دفعياً تدرّجات الطباعة والتباعد البكسلية القديمة إلى rem مع توثيق الأساس الدقيق المستخدم في كل دفعة.
اختبارات وحدة لمساعِدات أطوال CSS
ولّد أزواج px↔rem معلومة الصحّة مع رفض أساس صفري متعمّد لمكتبات أدوات الواجهة الأمامية وحِزم أنظمة التصميم.
الأسئلة الشائعة
كيف تحوّل px إلى rem؟
اقسم طول البكسل على حجم خط الجذر بالبكسل: rem = px / base. مع جذر 16px، تصبح 24px مساويةً ل 1.5rem.
كيف تحوّل rem إلى px؟
اضرب طول rem في حجم خط الجذر بالبكسل: px = rem × base. مع جذر 16px، تصبح 1.25rem مساويةً ل 20px.
هل تحوّل هذه وحدات em أو النسبة المئوية %؟
لا. تحوّل فقط بين px وrem بأساس جذر صريح بالبكسل. em نسبي إلى عنصر أب لا إلى الجذر.
أي أساس أستخدم إذا كانت ورقة الأنماط تضبط html على 62.5%؟
استخدم 10 px، لأن 62.5% من 16 بكسلًا الافتراضية في المتصفح تساوي عشرة بكسلات. وبهذا الأساس يصبح عنوان بحجم 24 px مساويًا 2.4 rem، لا 1.5 rem كما مع أساس 16.
لماذا لا يمكن أن يكون الأساس صفرًا؟
لأن المقياس يصبح غير معرَّف عندما يكون حجم خط الجذر صفرًا، فيرفض المحوّل هذا الأساس برسالة واضحة بدل أن يعطي أطوالًا لا نهائية.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/conv/typography-px-rem \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"value":16,"from":"px","to":"rem","base":16}'const res = await fetch("https://api.kit.forhosting.com/conv/typography-px-rem", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"value": 16,
"from": "px",
"to": "rem",
"base": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/conv/typography-px-rem",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"value": 16,
"from": "px",
"to": "rem",
"base": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/conv/typography-px-rem", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"value":16,"from":"px","to":"rem","base":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"value":16,"from":"px","to":"rem","base":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/conv/typography-px-rem", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"value": 16,
"from": "px",
"to": "rem",
"base": 16
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "conv.typography_px_rem",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الحدود
max_abs | 1000000000000 |
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
حين يكون base صفراً يصبح المقياس غير معرّف، فيعيد ال API خطأ invalid_input واضحاً بدل ابتكار أطوال لانهائية. المسار حسابٌ صرف — بلا شبكة ولا بذور عشوائية ولا اعتماد على الساعة — فيعيد مشغّل المتصفّح المجاني وال API مسبق الدفع JSON نفسه بعد تقريب عشري ثابت في كل مرة تستدعيه.
كيف تستدعي ال API وما الذي يعود
يجب أن يكون base غير صفري؛ وتُعامَل القيم المطلقة عند واحد ضرب عشرة أس سالب خمسة عشر أو دونها كصفر وتُرفض. أرسل جسم JSON بأربعة حقول مطلوبة: value (البدائل amount وn وlength)، وfrom (البدائل from_unit وunit_from وsource)، وto (البدائل to_unit وunit_to وtarget)، وbase (البدائل root وroot_font_size وroot_px وbase_px). يجب أن يكون value وbase رقمين منتهيين تبقى قيمتاهما المطلقتان ضمن الحدّ المنشور البالغ تريليوناً واحداً كي تظلّ الحواصل الوسيطة منتهية في دقة IEEE المزدوجة على ال Worker وفي المتصفّح. ويجب أن يُحلّ from وto إلى px أو rem بعد تطبيع البدائل — pixel وpixels وrem وrems وroot em والتهجئات المشابهة مقبولة؛ أما أسماء الوحدات المجهولة فتعيد invalid_input. عند النجاح تعيد الاستجابة value وfrom وto وbase مقرّبةً؛ وتضبط result وconverted على مقدار المخرَج المقرّب نفسه؛ وunit على وحدة الهدف؛ وcss على سلسلة مضغوطة مثل rem واحد أو أربعة وعشرين px؛ وformula على rem يساوي px على base، أو px يساوي rem في base، أو رسالة التطابق حين يساوي from قيمة to؛ وmessage على ملخّص إنكليزي قصير؛ وsteps على مصفوفة مرتّبة من أسطر التعويض. أما التحقّق الفاشل — الحقول المفقودة، والأرقام غير المنتهية، والقيم خارج الحدود المطلقة، والوحدات المجهولة، والأساس الصفري، أو النتيجة غير المنتهية — فيعيد invalid_input ولا يُحصَّل أبداً. التسعير ثابت بسعر $0.002 لكل طلب ناجح مع عنصر وحدة وسعر وحدة حدّي صفري.
نصائح عملية وحدود وعمليات بحث ذات صلة
أزواج أمثلة للتعليم والاختبار: ستة عشر px إلى rem مع أساس ستة عشر تعطي rem واحداً؛ وواحد فاصل خمسة rem إلى px مع أساس ستة عشر تعطي أربعة وعشرين px؛ وعشرون px إلى rem مع أساس عشرة تعطي اثنين rem؛ والأساس الصفري مع أي قيمة يبيّن مسار invalid_input الصارم. لا تستهلك المهامّ الفاشلة التي تعيد invalid_input الرصيد مسبق الدفع، ما يبقي السكربتات الاستكشافية رخيصة حين يضبط المطوّرون base على صفر عمداً.
أسئلة تقنية
ماذا يحدث حين يكون base صفراً؟
التحويل غير معرّف. تعيد هذه الأداة invalid_input بدل القسمة على صفر أو ابتكار أطوال لانهائية.
هل محوّل px إلى rem مجاني؟
أداة المتصفّح مجانية وتعمل محلياً. وتستخدم استدعاءات ال API رصيد KIT مسبق الدفع بسعر $0.002 لكل طلب ناجح؛ ولا تُحصَّل المهامّ الفاشلة أبداً.