محول Pixel إلى REM/EM
حوّل px إلى rem وem لأغراض CSS، مع إمكانية ضبط حجم الخط الجذري والأصل — لأن rem وem لا يعتمدان على الشيء نفسه.
يكون REM دائمًا نسبيًا إلى حجم خط الجذر (<html>). أما EM فهو نسبي إلى حجم خط العنصر الحالي نفسه — والذي يمكن أن يختلف في كل مكان يُستخدم فيه. عدّل حجم العنصر الأصل أعلاه لترى كيف تتغير نتيجة EM بشكل مستقل عن REM.
فوري ومباشر
يتم تحديث كل وحدة أثناء الكتابة — بلا زر "تحويل"، وبلا انتظار.
REM وEM منفصلان
مدخلات مستقلة لحجم خط الجذر والعنصر الأصل، لأنهما ليسا الشيء نفسه.
خاص بالتصميم
يعمل بالكامل داخل متصفحك. لا يتم رفع أو تسجيل أي شيء على الإطلاق.
تحويل PX إلى REM وEM عبر الإنترنت
عند حجم خط جذر افتراضي يبلغ 16px، يساوي 16px قيمة 1rem. يحسب محول CurePDF قيم rem وem من قيمة بالبكسل (أو يحوّل بالاتجاه المعاكس)، باستخدام أي حجم خط جذر وأصل تحدده — لأن ليس كل موقع يستخدم الإعداد الافتراضي للمتصفح.
كيف يعمل تحويل PX إلى REM
أمثلة محلولة (جذر 16px): 16px / 16 = 1rem. 20px / 16 = 1.25rem. 24px / 16 = 1.5rem.
REM مقابل EM: ليسا نفس الشيء
يكون REM دائمًا نسبيًا إلى حجم خط عنصر الجذر <html> — قيمة واحدة لكامل الصفحة. أما EM فهو نسبي إلى حجم خط العنصر الحالي نفسه، والذي يمكن أن يختلف في كل مستوى من المحتوى المتداخل. هذا يعني أن نفس قيمة البكسل يمكن أن تتحول إلى قيمة EM مختلفة حسب مكان استخدامها، بينما تتحول دائمًا إلى نفس قيمة REM.
لماذا نستخدم REM بدلاً من البكسل في CSS؟
تتغير قيم REM تلقائيًا عند قيام المستخدم بتغيير حجم الخط الأساسي للمتصفح في إعدادات إمكانية الوصول، بينما لا تتغير قيم البكسل الثابتة. هذا يجعل rem خيارًا افتراضيًا أكثر مراعاة لإمكانية الوصول لتحديد حجم النص، بينما يُخصَّص em للحالات التي يجب أن يتغير فيها الحجم فعليًا مع العنصر الأصل (مثل التباعد الداخلي الذي يجب أن يكبر مع حجم خط الزر).
الأسئلة الشائعة
كم يساوي 16px بوحدة rem؟
عند حجم الخط الجذري الافتراضي 16px، يساوي 16px وحدة rem واحدة. الصيغة هي: rem = px / حجم الخط الجذري.
هل REM هو نفسه EM؟
لا. تكون REM دائمًا نسبة إلى حجم خط العنصر الجذري (html). أما EM فهي نسبة إلى حجم خط العنصر الحالي نفسه، والذي قد يختلف في كل مستوى من المحتوى المتداخل — لذا يمكن لنفس قيمة البكسل أن تتحول إلى قيم EM مختلفة حسب مكان استخدامها.
لماذا نستخدم REM بدلًا من البكسل في CSS؟
عندما يغيّر المستخدم حجم الخط الأساسي في متصفحه (لأغراض إمكانية الوصول)، تتكيف قيم REM تلقائيًا، بينما لا تتكيف قيم البكسل الثابتة — مما يجعل REM وحدة أكثر ملاءمة لإمكانية الوصول في تحجيم النصوص.
ما حجم الخط الجذري الافتراضي؟
16px في الإعداد الافتراضي لكل متصفح رئيسي. يستخدم هذا المحول 16px افتراضيًا لكنه يتيح لك تغييره ليطابق CSS الفعلي لموقعك.