🚀 البدء السريع

إدخال قيمة ووحدة: مثل 16 + px أو 1 + rem
تعيين السياق: حجم خط الجذر/الأب وأبعاد المنفذ (viewport) وقيمة DPI (تؤثر على rem/em/vw/vh/pt/cm …)
عرض النتائج: تُحسب الوحدات الأخرى فورًا ويمكن نسخها
نقاط التوقف: بدّل بين الهاتف/اللوحي/سطح المكتب للتحقق على شاشات مختلفة

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

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

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

تعيين الأساس: 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 وتجارب طباعة