إغلاق الإعلانات

محول وحدات CSS

محول وحدات CSS

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

إرشادات الاستخدام

🚀 بداية سريعة

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

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

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

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

  • تعيين الأساس: 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؛ يلزم التحقق للطباعة/الشاشات عالية الكثافة

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

  • تتم جميع المعالجة داخل متصفحك؛ ولا تغادر بياناتك جهازك

❓ أسئلة شائعة

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

rem نسبة إلى خط الجذر (مناسب للتكبير العام)، em نسبة إلى خط الأب (مناسب داخل المكوّن)

أستخدم px أم rem؟

للتخطيط والنص يُفضّل rem (إتاحة الوصول)؛ px مناسب للأيقونات/الحدود الدقيقة

لماذا يختلف سلوك vw/vh بين الأجهزة؟

تؤثر أشرطة العناوين ومناطق الأمان والتمرير على منفذ العرض؛ استخدم مع clamp()/min()/max() ونقاط التوقف

كيف أحوّل بكسلات الشاشة إلى وحدات طباعة؟

عيّن DPI (مثل 96/72/300). التحويل هنا تقديري؛ للطباعة الفعلية استخدم ملفات ICC وتجارب طباعة