محوّل وحدات CSS

حوّل فورًا بين px وrem وem وpt وvw وvh و%، باستخدام حجم الخط الأساسي وأبعاد نافذة العرض الخاصة بك — لا مزيد من التخمين حول ما يمثله 1.5rem فعليًا بالبكسل.

ما هي محوّل وحدات CSS؟

تدعم CSS عدة وحدات مختلفة لتحديد الأحجام — وحدات مطلقة مثل px وpt، ووحدات نسبية مثل rem وem وvw وvh و%. تُعد الوحدات النسبية أساسية للتصميم المتجاوب وسهل الوصول (تحترم rem بشكل خاص تفضيل حجم خط متصفح المستخدم)، لكن التحويل بينها ذهنيًا صعب فعليًا، لأن النتيجة تعتمد على السياق: حجم الخط الجذري، أو حجم خط العنصر الحالي، أو أبعاد نافذة العرض.

يقوم هذا المحوّل بهذا الحساب نيابةً عنك: حدّد حجم الخط الأساسي، وأبعاد نافذة العرض، والقيمة التي تحوّلها، وشاهد فورًا القيمة المكافئة في كل وحدة أخرى — مفيد لترجمة قياسات البكسل في تصميم أولي (mockup) إلى قيم rem/vw متجاوبة، أو للتحقق من كيفية عرض قاعدة CSS موجودة فعليًا على الشاشة.

الصيغة

1rem = 1em = حجم الخط الأساسي (16px افتراضيًا)

1pt = 96/72 px ≈ 1.333px

1vw = عرض نافذة العرض / 100

1vh = ارتفاع نافذة العرض / 100

1% = القيمة المرجعية / 100

كيفية الحساب

أدخل القيمة التي تريد تحويلها واختر وحدتها المصدر.
حدّد حجم الخط الأساسي الخاص بك (الافتراضي هو معيار المتصفح 16px).
لتحويلات vw/vh، أدخل عرض وارتفاع نافذة العرض المستهدفة.
اقرأ فورًا القيمة المكافئة في كل وحدة أخرى.

مثال

عند حجم خط أساسي قدره 16px، يتحول 1.5rem إلى 24px. وعند عرض نافذة عرض قدره 1440px، يتحول 5vw إلى 72px.

الفوائد الرئيسية

يحوّل بين جميع وحدات CSS السبع الشائعة في مكان واحد
يستخدم حجم الخط الأساسي ونافذة العرض الفعليين، وليس افتراضًا ثابتًا
نتائج فورية أثناء الكتابة — لا حاجة لفتح أدوات مطوري المتصفح
مجاني، بلا تسجيل، ويعمل بالكامل داخل متصفحك

الأخطاء الشائعة التي يجب تجنبها

افتراض أن 1rem تساوي دائمًا 16px، دون التحقق مما إذا تم تغيير حجم الخط الجذري
استخدام vh لتصاميم ملء الشاشة على الجوال دون مراعاة سلوك شريط عنوان المتصفح
تداخل أحجام خطوط قائمة على em والمفاجأة بتراكمها بشكل غير متوقع
خلط px وrem بشكل غير متسق ضمن المكوّن نفسه، مما يكسر تكيّف سهولة الوصول

نصائح احترافية

فضّل rem على em لأحجام الخطوط لتجنب التراكم غير المتوقع في المكوّنات المتداخلة
استخدم dvh/svh بدلًا من vh لتصاميم ملء الشاشة على الجوال إذا كانت متصفحاتك المستهدفة تدعم ذلك
حافظ على حجم خط أساسي متسق عبر نظام التصميم الخاص بك حتى تظل تحويلات rem قابلة للتنبؤ
عند ترجمة تصميم دقيق بالبكسل، حوّل التباعد إلى rem لكن أبقِ عرض الحدود والتفاصيل الدقيقة الأخرى بوحدة px

شرح المصطلحات الأساسية

حجم الخط الجذري: حجم الخط المحدد على عنصر html، والذي تكون جميع وحدات rem نسبية إليه
نافذة العرض (Viewport): المنطقة المرئية من صفحة ويب داخل نافذة المتصفح
الوحدة المطلقة: وحدة مثل px أو pt ذات حجم فعلي ثابت، غير نسبية لأي سياق
الوحدة النسبية: وحدة مثل rem أو em أو vw أو % يعتمد حجمها على قيمة أخرى

حالات الاستخدام الشائعة

تحويل مواصفة قائمة على البكسل من Figma/Sketch لمصمم إلى قيم rem من أجل CSS سهل الوصول
التحقق من الشكل الفعلي لحجم خط متجاوب قائم على vw عند عرض شاشة محدد
ترجمة CSS قديم قائم على pt للطباعة أو البريد الإلكتروني إلى px أو rem وفق معايير الويب
مراجعة ما إذا كان مقياس التباعد في نظام تصميم يتوافق بدقة عبر الوحدات
التحقق السريع من قيمة CSS أثناء مراجعة الشيفرة دون فتح أدوات المطورين

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

ما الفرق بين rem وem؟

تكون rem دائمًا نسبية إلى حجم خط العنصر الجذر (html)، لذا تبقى ثابتة بغض النظر عن مدى تداخل العنصر. أما em فهي نسبية إلى حجم خط العنصر الحالي نفسه، مما يعني أنها قد تتراكم عند التداخل — تعامل هذه الأداة كلتيهما بالطريقة نفسها من أجل التبسيط، باستخدام حجم الخط الأساسي الخاص بك.

لماذا يساوي 1rem عادةً 16px؟

16px هو حجم الخط الافتراضي للمتصفح للعنصر الجذر html في كل متصفح تقريبًا. وبما أن rem نسبية إلى ذلك الحجم الجذري، فإن 1rem يساوي 16px ما لم تغيّر الصفحة (أو إعدادات متصفح المستخدم) حجم الخط الجذري صراحةً.

ما استخدامات vw وvh؟

تمثّل vw (عرض نافذة العرض) وvh (ارتفاع نافذة العرض) نسبًا مئوية من العرض والارتفاع الحاليين لنافذة المتصفح — يساوي 1vw نسبة 1% من عرض نافذة العرض. تُستخدم عادةً في التصاميم بملء الشاشة والطباعة المتجاوبة التي تتكيف مع حجم الشاشة.

هل يساوي البكسل دائمًا بالضبط 1/96 من البوصة؟

وفقًا لمواصفة CSS، نعم — يُعرَّف بكسل CSS بأنه 1/96 من البوصة، وهذا أيضًا سبب تحويل 1pt (1/72 من البوصة) إلى 96/72 = 1.333 بكسل CSS بالضبط.