محوّل px إلى rem وem

ما الذي يقدمه هذا المحوّل

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

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

الفرق بين px وrem وem

px هو طول ثابت لا يتغير. أما rem فتُقاس وفقًا لحجم خط الجذر الخاص بالصفحة، لذلك عند حجم جذر يساوي 16px يكون 1rem مساويًا لـ16px. أما em فتُقاس مقارنة بحجم خط العنصر الذي توجد فيه هي نفسها، وليس بالضرورة حجم خط الجذر. تحديد أحجام الخط والتباعد بوحدة rem يجعل كل عنصر في الصفحة يتغيّر حجمه تلقائيًا عندما يغيّر القارئ حجم الخط الافتراضي لديه، وهذا ما يجعل هذه الوحدة مفيدة لمن يريد أن يتوسّع تصميمه بشكل صحيح مع كل قارئ.

حجم خط الجذر ودوره في قيم rem

حقل "حجم خط الجذر (px)" هو القيمة التي يُقاس عليها كل تحويل rem في هذا المحوّل. القيمة الافتراضية لحجم خط الجذر هي 16px، وفي البداية يكون 16px مساويًا لـ1rem ومساويًا أيضًا لـ1em. إذا غيّرت حجم خط الجذر ليطابق ملف الـCSS الخاص بمشروعك، تتحدّث كل قيمة rem في الحقول الأخرى فورًا لتعكس الأساس الجديد. يجب أن يكون حجم خط الجذر رقمًا أكبر من 0؛ فإذا أدخلت قيمة غير صالحة في هذا الحقل يعرض المحوّل الرسالة "يجب أن يكون حجم الخط الجذر رقمًا أكبر من 0."

حجم سياق em ولماذا هو حقل منفصل

بما أن em تُقاس مقارنة بحجم خط العنصر نفسه وليس بالضرورة حجم خط الجذر، يوفّر المحوّل حقلًا مستقلًا هو "حجم خط سياق em ‏(px)". اضبط هذا الحقل على حجم خط العنصر الذي تحسب قيمته لتقرأ نتيجة em بشكل صحيح، وأبقِه مساويًا لحجم خط الجذر عندما يتطابق الاثنان. القيمة الافتراضية لحجم خط سياق em هي أيضًا 16px، ويجب أن تكون رقمًا أكبر من 0؛ وإلا يعرض المحوّل الرسالة "يجب أن يكون حجم خط سياق em رقمًا أكبر من 0."

طريقة استخدام المحوّل خطوة بخطوة

في حقل "قيم" أدخل رقمًا بوحدة px أو rem أو em — ويتم تحديث القيمتين الأخريين أثناء الكتابة. حرّر أي حقل من الحقول الثلاثة وسيتحدّث الحقلان الآخران تلقائيًا فور الكتابة فيه، سواء بدأت من px أو من rem أو من em. يسمح المحوّل أيضًا بإدخال قيم px سالبة. على سبيل المثال، عند حجم خط جذر افتراضي يساوي 16px، إدخال 24 في حقل px يحدّث حقل rem إلى 1.5rem، وإدخال ‎-16 في حقل px يحدّث حقل rem إلى ‎-1rem. إذا كتبت قيمة غير رقمية أو غير صالحة في حقل "قيم"، يعرض المحوّل الرسالة "أدخل رقمًا للتحويل."

أسفل حقول التحويل يوجد جدول بعنوان "قيم px → rem الشائعة (أساس 16px)"، يعرض مجموعة من قيم px الشائعة محوّلة إلى rem بافتراض أن حجم خط الجذر هو 16px. هذا الجدول مرجع سريع يمكن الرجوع إليه دون الحاجة لكتابة كل قيمة يدويًا في حقول التحويل، وهو مبني على حجم الجذر الشائع الذي تبدأ منه معظم المواقع.

الخصوصية أثناء الاستخدام

يتم تشغيل كل تحويل في متصفحك. لا يتم تحميل أي شيء تكتبه على BroBroGo.

أسئلة شائعة

ما الفرق بين px وrem وem؟ px طول ثابت. تُقاس rem وفقًا لحجم خط جذر الصفحة، فعند جذر 16px يساوي 1rem قيمة 16px. أما em فتُقاس مقارنة بحجم خط العنصر الذي توجد فيه. استخدام rem لأحجام الخط والتباعد يتيح لكل شيء تغيير حجمه عندما يغيّر القارئ حجم الخط الافتراضي لديه.

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

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