تخطي إلى المحتوى
شعار CrateX.app

CrateX.app

محول وحدات CSS

محول وحدات CSS

محول وحدات CSS: يدعم التحويل بين وحدات CSS مثل px وem وrem و% وvw وvh، مع توفير إعدادات نقاط توقف متجاوبة. يحسب تلقائيًا القيم المعتمدة على السياق، مناسب لتطوير التخطيط المتجاوب وتنفيذ الواجهة الأمامية وتكييف الأنماط.

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

Length Units

Typography

Viewport

Percentage

نسبي إلى حجم خط الجذر
rem
اضغط للتبديل بين الوحدات

Length Units

Typography

Viewport

Percentage
محول وحدات CSS

بداية سريعة

1
إدخال قيمة ووحدة: مثل 16 + px أو 1 + rem
2
اختر وحدة المصدر وأدخل القيمة ثم الوجهة؛ استخدم «تبديل» للتغيير سريعًا.
3
الجوال: السهم أعلى اليمين في الدرج للتبديل بين المصدر/الوجهة.
4
الإعدادات متاحة لـ rem/em/%/vw/vh؛ ومعطلة للوحدات المطلقة.
5
عرض النتائج: تُحسب الوحدات الأخرى فورًا ويمكن نسخها
6
نقاط التوقف: بدّل بين الهاتف/اللوحي/سطح المكتب للتحقق على شاشات مختلفة

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

الاستخدامات

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

سيناريو إضافي

يمكن التعامل مع rem to px وem محول وviewport units ضمن المسار نفسه لتدقيق النتيجة بسرعة قبل النسخ أو التصدير.

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

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

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

REM base (Root Font Size): يحدد التحويل بين rem ↔ px. الشائع 16px (≈1rem). عدّل عند اختلاف خط الأساس في التصميم.
EM base (Parent Font Size): يحدد em و% (عند كون المرجع حجم الخط). مناسب لمقياس محلي على مستوى المكوّن.
مرجع %: اختر حجم الخط / العرض / الارتفاع حسب السياق (تخطيط مقابل طباعة).
قوالب نقاط التوقف تضبط أيضًا أبعاد منفذ العرض لتقدير سريع (ليست media query وقت التشغيل).
أبعاد منفذ العرض لـ vw/vh/vmin/vmax و% (العرض/الارتفاع). تختلف الأجهزة الفعلية بسبب أشرطة العنوان / مناطق الأمان / أشرطة التمرير.
DPI: لتحويل الوحدات الفيزيائية pt/pc/in/cm/mm/q ↔ px. الافتراضي 96؛ للطباعة/HiDPI استخدم قيمة الجهاز.
نصائح: 1) استخدم 16px و96 DPI كأساس؛ 2) تحقّق من نسب التخطيط عبر تبديل نقاط التوقف؛ 3) هذه إعدادات لتقدير وقت التصميم، وليست بديلًا عن حساب المتصفح النهائي.

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

% يعتمد على الخاصية (تختلف width/height/line‑height). الأداة تقدّر الحالات الشائعة
ex/ch يعتمدان على مقاييس الخط؛ قد تختلف النتائج بين الخطوط/المتصفحات
تتغير وحدات منفذ العرض مع أشرطة العناوين/الأمان/التمرير؛ قد تظهر فروقات بسيطة
الوحدات الفيزيائية ↔ px تتغير مع DPI؛ يلزم التحقق للطباعة/الشاشات عالية الكثافة

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

تتم جميع المعالجة محليًا داخل المتصفح، ويمكنك استبدال المحتوى الحالي أو مسحه أو إعادة معالجته في أي وقت.

أسئلة شائعة

4

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