تخطي إلى المحتوى

محول وحدات CSS

حوّل وحدات CSS تحويلًا مباشرًا بين px وrem وem و% وvw وvh وvmin وvmax وpt وpc وin وcm وmm وq وex وch محليًا باستخدام حجم الخط الجذر وحجم الخط المرجعي لـ EM وإطار العرض وإعدادات المرجع المئوي. تستخدم وحدات CSS المطلقة النسبة الثابتة 1in = 96px.

px
اضغط للتبديل بين الوحدات

وحدات الطول

الطباعة

إطار العرض

النسبة المئوية

rem
اضغط للتبديل بين الوحدات

وحدات الطول

الطباعة

إطار العرض

النسبة المئوية

محول وحدات CSS

بداية سريعة

1
أدخل قيمة واختر وحدة المصدر
2
اختر وحدة الوجهة أو استخدم «تبديل» للعكس
3
عيّن سياق الجذر ومرجع EM والنسبة المئوية وإطار العرض حسب الحاجة؛ واستخدم لمرجع EM حجم الخط الذي تستخدمه الخاصية فعليًا.
4
انسخ نتيجة التحويل
5
بدّل إعدادات منفذ العرض المسبقة لفحص vw/vh

سيناريوهات شائعة

الاستخدامات

تخطيطات متجاوبة، تسليم التصميم إلى التطوير، مواءمة الكثافة/الطباعة، توحيد الأعراف

نصائح الاستخدام

تعيين الأساس: 16px للجذر شائع ويسهّل حساب rem ↔ px
النصوص rem: يسهّل التكبير العام وإتاحة الوصول؛ em لقياس محلي داخل المكوّن
استخدم وحدات إطار العرض لتقديرات التخطيط: ادمجها مع نقاط التوقف وقيود الحد الأدنى/الأقصى لتجنب الحدود القصوى
الكسور والتقريب: احتفظ بدقة معقولة لتحسين قابلية القراءة

المعلمات والسياق

أساس REM (حجم الخط الجذر): يحدد التحويل بين rem ↔ px. الشائع 16px (≈1rem). عدّل عند اختلاف خط الأساس في التصميم.
حجم الخط المرجعي لـ EM: أدخل حجم الخط الذي تستخدمه الخاصية فعليًا. تستخدم em عادةً حجم الخط المحسوب للعنصر الحالي؛ أما في font-size والخصائص المماثلة النسبية إلى الخط، فاستخدم حجم خط العنصر الأب. يُستخدم هذا المرجع أيضًا لتقديرات ex/ch ولـ % عند تحديد «حجم الخط».
مرجع %: اختر حجم الخط / العرض / الارتفاع حسب السياق (تخطيط مقابل طباعة).
قوالب نقاط التوقف تضبط أيضًا أبعاد منفذ العرض لتقدير سريع (ليست media query وقت التشغيل).
أبعاد منفذ العرض لـ vw/vh/vmin/vmax و% (العرض/الارتفاع). تختلف الأجهزة الفعلية بسبب أشرطة العنوان / مناطق الأمان / أشرطة التمرير.
نصائح: 1) يُعد 16px قيمة شائعة للجذر ومرجع EM، لكن استخدم حجم الخط الذي تستخدمه الخاصية فعليًا؛ 2) تحقّق من النسب المئوية للتخطيط عبر تبديل نقاط التوقف؛ 3) تدعم عناصر التحكم هذه تقديرات وقت التصميم ولا تحل محل حساب DOM/CSS النهائي للمتصفح. تستخدم الوحدات المطلقة دائمًا 1in = 96px.

القيود والتوافقية

يعتمد المرجع % على خاصية CSS، التي تحتوي على الكتلة ووضع التخطيط؛ تستخدم هذه الأداة المرجع المختار لحجم الخط/عرض منفذ العرض/ارتفاع منفذ العرض للتقدير، وليس قياسًا مباشرًا للأصل/الحاوية
تمثل ex/ch قيمًا تقريبية تستند إلى حجم الخط المرجعي لـ EM هنا؛ فالنتائج ليست فحصًا لمقاييس الخط، وتختلف باختلاف الخطوط والمتصفحات.
تختلف vw/vh/vmin/vmax الكلاسيكية مع أشرطة التمرير/أشرطة العناوين/المناطق الآمنة؛ لا تقوم هذه الأداة بحساب وحدات استعلام dvh/svh/lvh أو vi/vb أو المنطقة الآمنة أو الحاوية
تستخدم تحويلات وحدات CSS المطلقة النسبة الثابتة 1in = 96px. وتتطلب مطابقة وحدات البكسل الفعلية على الشاشة مع الحجم المطبوع سير عمل منفصلًا للجهاز/الطباعة، وهو ما لا توفره هذه الأداة.

الخصوصية والأمان

تتم المعالجة في متصفحك. قد تبقى قيمة الإدخال ووحدتا From/To والقيم المخزنة مؤقتًا لكل وحدة وحجم الخط الجذر وحجم الخط المرجعي لـ EM وإطار العرض والمرجع المئوي واختيار نقطة التوقف في جلسة المتصفح الحالية أو في تخزين المتصفح. إذا حفظت مساحة عمل أو فعّلت مزامنة WebDAV، فقد تُحفظ هذه القيم وفقًا لإعدادات المزامنة لديك. يُعاد حساب نتائج التحويل من القيمة والوحدات وإعدادات السياق الحالية، ولا تُخزَّن كنتاج منفصلة. لا تجلب هذه الصفحة عناوين URL ولا ترسل القيم لإجراء التحويل على الخادم. على الأجهزة المشتركة، امسح القيم والإعدادات وبيانات الموقع عند الحاجة.

أسئلة شائعة

4

تابع الخطوة التالية باستخدام هذه الأدوات ذات الصلة.

تتم كل معالجة الأدوات محليًا داخل متصفحك.