DevTulz Online

محوّل PX ↔ REM

px

PX → REM

px

REM → PX

rem

الجدول المرجعي

px rem em

ما الفرق بين PX و REM؟

PX (بكسل) وحدة مطلقة — تُعرض دائمًا بنفس الحجم الفعلي. REM (روت إيم) وحدة نسبية مرتبطة بحجم خط العنصر الجذري (عادةً 16px افتراضيًا في المتصفحات). يُسهّل استخدام REM بناء تخطيطات قابلة للوصول وقابلة للتوسع تحترم تفضيلات حجم الخط لدى المستخدم.

كيفية استخدام محوّل PX إلى REM

  1. حدّد حجم الخط الأساسي (الافتراضي 16px — يطابق معظم المتصفحات).

  2. أدخل قيمة البكسل لرؤية القيمة المعادلة بـ REM.

  3. أو أدخل قيمة REM لتحويلها إلى بكسل.

  4. استخدم جدول المرجع أدناه للتحويلات الشائعة.

الصيغة: rem = px ÷ حجم الخط الأساسي. للقاعدة الافتراضية 16px: 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px. تتم جميع العمليات الحسابية فورًا في متصفحك.

الأسئلة الشائعة

هل يجب أن أستخدم rem أم em لأحجام الخطوط؟ استخدم rem لأحجام الخطوط ومعظم المسافات. rem نسبة إلى حجم الخط الجذري وثابتة في جميع أنحاء الوثيقة. em نسبة إلى حجم الخط للعنصر الأب، مما يتراكم في العناصر المتداخلة ويمكن أن يسبب نتائج غير متوقعة. rem أسهل بشكل عام للفهم.

ما هو حجم الخط الأساسي؟ معظم المتصفحات تفترض افتراضيًا 16px لحجم الخط الجذري. إذا كان CSS الخاص بك يقول html { font-size: 62.5%; } (خدعة شائعة)، تصبح القاعدة 10px، مما يجعل حسابات rem أبسط: 1rem = 10px. اضبط حجم القاعدة لهذه الأداة ليطابق مشروعك.

لماذا استخدام rem بدلاً من px للوصول؟ قد يزيد المستخدمون الذين يعانون من ضعف البصر أو صعوبات القراءة حجم الخط الافتراضي للمتصفح لديهم في إعدادات إمكانية الوصول. تتجاهل وحدات px هذا التفضيل. تتسع وحدات rem و em مع تفضيل المستخدم، مما يجعل واجهة المستخدم أكثر قابلية للاستخدام للجميع.

Keywords: محوّل px إلى rem, rem إلى px, بكسل إلى rem, محوّل وحدات CSS, محوّل حجم الخط, تصميم متجاوب, حاسبة rem