ForHosting KIT · قراءة المواقع ومراقبتها

محول وحدات CSS

يحوّل محوّل وحدات CSS هذا قيمة طول رقمية إلى px أو em أو rem أو pt اعتماداً على حجم الخط الأساسي الذي تحددونه.

● Betaمجاني · داخل متصفحك

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

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

اختاروا المصدر والهدف والمرجع بعناية

أدخلوا أولاً الجزء الرقمي من طول CSS من دون الوحدة، ثم اختاروا وحدة المصدر المطابقة. حددوا px أو em أو rem أو pt كهدف، وأدخلوا حجم خط أساسي موجباً بالبكسل. تتحكم هذه القاعدة في كل تحويل من em أو rem وإليهما. فعند قاعدة قدرها 16 بكسلاً، تتحول 2rem إلى 32px، وتتحول 24px إلى 1.5em. في CSS الفعلي، تشير em عادة إلى حجم الخط المحسوب للعنصر المعني أو للعنصر الأب، بينما تشير rem إلى العنصر الجذر. ولأن الأداة توفر حقل قاعدة واحداً، استخدموا المرجع المناسب: الحجم المحلي مع em وحجم الجذر مع rem. لا تعتمد التحويلات المحصورة بين px وpt رياضياً على هذا المرجع، لكن الحقل يظل مطلوباً كي يبقى عقد كل طلب موحداً وصريحاً. كما يمنع ذلك افتراض أن جميع المواقع تستخدم حجماً جذرياً قدره 16px.

افهموا مسار التحويل والتقريب

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

استخدموا القيم مع الحفاظ على مقصد التصميم

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

حالات الاستخدام

ترحيل مكوّن مبني على البكسل

حوّلوا أحجام الخط والمسافات الثابتة إلى em أو rem مع توثيق حجم الخط المرجعي للمكوّن.

مطابقة مواصفات الطباعة والويب

حوّلوا قياسات النقاط من تصميم أو وثيقة إلى بكسلات CSS، ثم تحققوا من النتيجة عند المقياس المقصود.

أتمتة رموز التصميم

أنشئوا بدائل حتمية للرموز واختبارات اللقطات ومولدات أوراق الأنماط ومكتبات المكوّنات.

الأسئلة الشائعة

ما تكلفة التحويل؟

يمكنكم تشغيله مجاناً في المتصفح. يكلف كل طلب API ناجح $0.002 لعنصر محوّل واحد.

ما القاعدة التي ينبغي استخدامها مع rem؟

استخدموا حجم الخط المحسوب للعنصر الجذر بالبكسل. تستخدم مشروعات كثيرة 16px، لكن ورقة الأنماط أو إعدادات المستخدم قد تحدد قيمة أخرى.

ما القاعدة التي ينبغي استخدامها مع em؟

استخدموا حجم الخط المحسوب الذي يعود إليه قياس em، وهو عادة حجم العنصر المعني أو العنصر الأب وفق الخاصية والسياق.

كيف تحوّل النقاط؟

يستخدم الحساب نسبة CSS البالغة 96px لكل بوصة و72pt لكل بوصة؛ ولذلك تساوي 1pt مقدار 1.333333 بكسل CSS دوري.

ما الوحدات المرفوضة؟

يرفض أي مصدر أو هدف خارج px وem وrem وpt. لا يخمّن المحوّل النسب المئوية أو وحدات إطار العرض أو تعبيرات calc().

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/web/css-unit-convert

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/web/css-unit-convert \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"value":24,"from":"px","to":"rem","base":16}'

const res = await fetch("https://api.kit.forhosting.com/web/css-unit-convert", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "value": 24,
    "from": "px",
    "to": "rem",
    "base": 16
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/css-unit-convert",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "value": 24,
    "from": "px",
    "to": "rem",
    "base": 16
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/css-unit-convert", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"value":24,"from":"px","to":"rem","base":16}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"value":24,"from":"px","to":"rem","base":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/css-unit-convert", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "value": 24,
  "from": "px",
  "to": "rem",
  "base": 16
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.css_unit_convert",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`timeout_sec`	30
`max_crawl_pages`	25

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←