ما هي محوّل وحدات CSS؟
تدعم CSS عدة وحدات مختلفة لتحديد الأحجام — وحدات مطلقة مثل px وpt، ووحدات نسبية مثل rem وem وvw وvh و%. تُعد الوحدات النسبية أساسية للتصميم المتجاوب وسهل الوصول (وحدة rem تحديداً تحترم تفضيل حجم خط المستخدم في المتصفح)، لكن التحويل بينها ذهنياً صعب حقاً، لأن النتيجة تعتمد على السياق: حجم الخط الجذري، أو حجم خط العنصر الحالي، أو أبعاد نافذة العرض.
تقوم هذه الحاسبة بهذا الحساب نيابةً عنك: حدد حجم الخط الأساسي وأبعاد نافذة العرض والقيمة التي تحول منها، وشاهد القيمة المكافئة بكل وحدة أخرى فوراً — مفيدة لترجمة قياسات البكسل في نماذج التصميم إلى قيم rem/vw متجاوبة، أو للتحقق مما تُظهره قاعدة CSS موجودة فعلياً على الشاشة.
متى تستخدم هذه الآلة الحاسبة
- عند الحاجة لتقييم تكاليف الأداة قبل البدء في المشروع
- عند مقارنة نتائج الأداة مع أدوات أخرى مشابهة
- عند التعلم كيفية استخدام الأداة في سيناريوهات مختلفة
- عند مشاركة النتائج مع الفريق أو العملاء
- عند التحقق من دقة حسابات الأداة
- عند البحث عن طريقة سريعة وسهلة لحل مشكلة محددة
الخطوات:
- أدخل القيمة التي تريد تحويلها واختر وحدتها المصدر.
- حدّد حجم الخط الأساسي الخاص بك (الافتراضي هو معيار المتصفح 16px).
- لتحويلات vw/vh، أدخل عرض وارتفاع نافذة العرض المستهدفة.
- اقرأ فورًا القيمة المكافئة في كل وحدة أخرى.
الصيغة
1rem = 1em = حجم الخط الأساسي (16px افتراضيًا)
1pt = 96/72 px ≈ 1.333px
1vw = عرض نافذة العرض / 100
1vh = ارتفاع نافذة العرض / 100
1% = القيمة المرجعية / 100
حالات الاستخدام
- تحويل مواصفة قائمة على البكسل من Figma/Sketch لمصمم إلى قيم rem من أجل CSS سهل الوصول
- التحقق من الشكل الفعلي لحجم خط متجاوب قائم على vw عند عرض شاشة محدد
- ترجمة CSS قديم قائم على pt للطباعة أو البريد الإلكتروني إلى px أو rem وفق معايير الويب
- مراجعة ما إذا كان مقياس التباعد في نظام تصميم يتوافق بدقة عبر الوحدات
- التحقق السريع من قيمة CSS أثناء مراجعة الشيفرة دون فتح أدوات المطورين
الفوائد الرئيسية
- يحوّل بين جميع وحدات CSS السبع الشائعة في مكان واحد
- يستخدم حجم الخط الأساسي ونافذة العرض الفعليين، وليس افتراضًا ثابتًا
- نتائج فورية أثناء الكتابة — لا حاجة لفتح أدوات مطوري المتصفح
- مجاني، بلا تسجيل، ويعمل بالكامل داخل متصفحك
نصائح احترافية
- فضّل rem على em لأحجام الخطوط لتجنب التراكم غير المتوقع في المكوّنات المتداخلة
- استخدم dvh/svh بدلًا من vh لتصاميم ملء الشاشة على الجوال إذا كانت متصفحاتك المستهدفة تدعم ذلك
- حافظ على حجم خط أساسي متسق عبر نظام التصميم الخاص بك حتى تظل تحويلات rem قابلة للتنبؤ
- عند ترجمة تصميم دقيق بالبكسل، حوّل التباعد إلى rem لكن أبقِ عرض الحدود والتفاصيل الدقيقة الأخرى بوحدة px
الأخطاء الشائعة التي يجب تجنبها
- افتراض أن 1rem تساوي دائمًا 16px، دون التحقق مما إذا تم تغيير حجم الخط الجذري
- استخدام vh لتصاميم ملء الشاشة على الجوال دون مراعاة سلوك شريط عنوان المتصفح
- تداخل أحجام خطوط قائمة على em والمفاجأة بتراكمها بشكل غير متوقع
- خلط px وrem بشكل غير متسق ضمن المكوّن نفسه، مما يكسر تكيّف سهولة الوصول
شرح المصطلحات الأساسية
- حجم الخط الجذري: حجم الخط المحدد على عنصر html، والذي تكون جميع وحدات rem نسبية إليه
- نافذة العرض (Viewport): المنطقة المرئية من صفحة ويب داخل نافذة المتصفح
- الوحدة المطلقة: وحدة مثل px أو pt ذات حجم فعلي ثابت، غير نسبية لأي سياق
- الوحدة النسبية: وحدة مثل rem أو em أو vw أو % يعتمد حجمها على قيمة أخرى
مفاهيم ذات صلة
- محول الألوان: تحويل بين صيغ الألوان HEX وRGB وHSL
- محول الطول: تحويل بين بوصات وسنتيمترات وبكسلات والمزيد
- محول الوحدات: تحويل بين وحدات قياس متنوعة
- حاسبة نسبة العرض إلى الارتفاع: حساب وتحويل نسب العرض إلى الارتفاع
- محول البيانات: تحويل بين بايت وكيلوبايت وميجاوبايت وجيجاوبايت وتيرابايت
مثال
عند حجم خط أساسي قدره 16px، يتحول 1.5rem إلى 24px. وعند عرض نافذة عرض قدره 1440px، يتحول 5vw إلى 72px.
تفسير نتائجك
يعرض هذا الأداة نتائج مفصلة بناءً على المدخلات التي قدمتها. راجع كل قسم بعناية لفهم كيفية تفسير الأرقام واخذ القرارات بناءً عليها.
إذا كانت لديك أسئلة حول كيفية عمل الأداة أو كيفية تفسير نتائج محددة، راجع قسم الأسئلة الشائعة أدناه أو تواصل مع الدعم الفني.