| px | rem |
|---|
حول هذه الأداة
وحدة rem (root em) وحدة طول في CSS نسبية إلى حجم خط عنصر الجذر <html>، بينما px بكسل جهاز مطلق. عند حجم الجذر الافتراضي للمتصفح البالغ 16px، يساوي 1rem مقدار 16px، فيكون 24px مساويًا لـ 1.5rem و10px مساويًا لـ 0.625rem. ولأن rem يتغيّر تبعًا لحجم الجذر، فإن تبديل الأساس يُعيد ضبط كل قيمة rem دفعةً واحدة — ويتيح لك هذا المحوّل تعيين ذلك الأساس وترجمة القيم في كلا الاتجاهين.
استخدمه لترحيل نظام تصميم قائم على px إلى وحدات rem قابلة للتوسّع، أو لتحجيم الطباعة والتباعد بما يحترم إعداد حجم خط المتصفح لدى المستخدم، أو للتحقق من سلامة سلّم Tailwind أو رموز التصميم، أو لاستنباط القيمة بالبكسل خلف تصريح rem في صفحة أنماط شخص آخر. ويمنحك الجدول المرجعي مكافئ rem لخطوات px الشائعة عند الأساس الذي اخترته بنظرة واحدة.
rem نسبي إلى حجم خط الجذر (<html>)، لا إلى العنصر الأب — وهذا هو الفرق الوحيد عن em، الذي يكون نسبيًا إلى أبيه نفسه.
الأسئلة الشائعة
كيف أحوّل px إلى rem؟
اقسم قيمة البكسل على حجم خط الجذر. عند جذر افتراضي بقيمة 16px، يكون 24px ÷ 16 = 1.5rem و10px ÷ 16 = 0.625rem. غيّر الأساس فتُسنَد قيمة px ذاتها إلى rem مختلف.
هل يساوي 1rem دائمًا 16px؟
فقط عندما يكون حجم خط الجذر هو الافتراضي للمتصفح البالغ 16px. يساوي 1rem أيًا كان font-size المُعيَّن على عنصر <html>، فإن كان الجذر 10px فإن 1rem يساوي 10px.
ما الفرق بين rem وem؟
rem نسبي دائمًا إلى حجم خط الجذر (<html>)، فيبقى متسقًا عبر الصفحة. أما em فنسبي إلى حجم خط عنصره/أبيه، فتتراكم قيم em المتداخلة ويمكن أن تنحرف.