تحويل px إلى rem
بكسل إلى rem بحسب حجم خط الجذر، مع جدول للقيم الشائعة.
24px = 1.5rem
جدول سريع عند جذر 16px
عن الأداة
rem تعني «حجم خط العنصر الجذري»، أي html. المتصفحات تجعله 16px افتراضيًا، فيكون 1rem = 16px، و24px = 24 ÷ 16 = 1.5rem. المعادلة كلها: rem = px ÷ حجم الجذر.
فائدة rem الحقيقية أنها تحترم إعداد القارئ: من يكبّر الخط الافتراضي في متصفحه لضعف نظر يرى الموقع كله يكبر معه إذا كُتبت الأحجام بالـ rem، ولا يرى شيئًا إذا كُتبت بالـ px.
em تشبهها لكنها نسبة إلى حجم خط العنصر الأب لا الجذر، فتتضاعف في العناصر المتداخلة. استخدم rem للأحجام العامة، وem لما يجب أن يكبر مع نص العنصر نفسه، مثل الحشو داخل زر.
أسئلة شائعة
هل أجعل html { font-size: 62.5% } لتسهيل الحساب؟
تجعل 1rem = 10px فيسهل الحساب الذهني، لكنها تفرض عليك كتابة حجم خط لكل النصوص وقد تكسر مكتبات تفترض 16px. الأبسط أن تبقي الافتراضي وتستخدم هذا الجدول.
هل أستخدم rem للحدود؟
للحدود الرفيعة (1px) ابقَ على البكسل، فلا معنى لأن يصير الحد 1.3px عند التكبير.