طريقة الاستخدام
- اكتب حجماً في القيمة، واختر اتجاه التحويل تحت التحويل، مثل من px إلى rem.
- راجع حجم الخط الأساسي (px). استخدم الحجم الذي يحدده موقعك لعنصر الجذر، و16 px هو الافتراضي في المتصفحات.
- الصق CSS في CSS المراد تحويله، واختر تحويل px في CSS إلى rem أو em.
- انسخ CSS بعد تحويل الأطوال، أو راجع حجماً في جدول التحويل.
العلاقة بين px وrem وem
البكسل طول مطلق على الشاشة. أما rem فهو مضاعف لحجم الخط في عنصر الجذر (عنصر html)، وem مضاعف لحجم الخط في العنصر الذي تُستخدم فيه. وتتبع الوحدتان حجم الخط الأساسي، فإن كان الأساس 16 px كان 1 rem يساوي 16 px.
لتحويل px إلى rem اقسم على الأساس، ولتحويل rem أو em إلى px اضرب في الأساس. وعند الأساس نفسه يعطي rem وem الرقم نفسه، ويختلفان فقط عندما لا يكون حجم خط العنصر الأب هو الأساس.
rem = px ÷ حجم الخط الأساسي؛ px = rem × حجم الخط الأساسيما يغيّره محوّل CSS وما لا يغيّره
يُحوَّل كل رقم يتبعه px، بما في ذلك القيم السالبة والكسور مثل .5px. وتُكتب الأرقام بنقطة كما يطلب CSS، بأربع منازل عشرية على الأكثر ودون أصفار زائدة في آخرها. ويصبح الطول الصفري 0 دون وحدة، وهذا ما يقبله CSS.
لا ينظر المحوّل إلى معنى CSS. فقيمة px داخل تعليق أو نص، مثل محتوى نصه 10px، تُحوَّل هي أيضاً. أما محتويات url() فتُترك كما هي، فلا يُغيَّر اسم ملف ينتهي بـ px. افحص النتيجة قبل استخدامها.
- استخدم rem لأحجام الخطوط والمسافات والعروض التي ينبغي أن تكبر حين يغيّر الزائر حجم النص.
- أبقِ 1 px للحدود الرفيعة، لأن قيمة rem تتحول في بعض الشاشات إلى خط باهت.
مثال محلول: نص أساسي بحجم 18 px على أساس 16 px
18 مقسومة على 16 تساوي 1.125، فيصبح font-size: 18px هو font-size: 1.125rem. وهامش بحجم 40 px يصبح 2.5rem، لأن 40 مقسومة على 16 تساوي 2.5.
والحجم نفسه 24 px على أساس 10 px يساوي 2.4 rem، ويعرض الجدول أن 24 px تساوي 1.5 rem عند الأساس 16 px. ومقطع CSS للمثال الافتراضي فيه ست قيم بوحدة px؛ تُحوَّل الست جميعها، ويعرض العداد الرقم 6.
الأسئلة الشائعة
لماذا يكون 16 px هو حجم الخط الأساسي؟
تستخدم معظم المتصفحات 16 px حجماً افتراضياً لعنصر الجذر، فيساوي 1 rem الـ16 px ما لم يحدد موقعك حجماً آخر. أدخل القيمة التي يحددها موقعك لعنصر html.
ما الفرق بين rem وem؟
يعتمد rem على حجم خط عنصر الجذر، فيبقى كما هو في الصفحة كلها. ويعتمد em على حجم خط العنصر الذي يُستخدم فيه، فيتغير الحجم عند تداخل العناصر. وعند الأساس نفسه تتساوى الأرقام.
هل يجب تحويل كل قيمة px إلى rem؟
ليس دائماً. فالحد بسمك 1 px يبدو أوضح بوحدة px على كثير من الشاشات، وبعض التفاصيل الصغيرة تبدو أفضل بثبات. استخدم rem لأحجام النص والمسافات وعروض التخطيط التي ينبغي أن تتبع إعدادات الزائر.
لماذا لا تُحوَّل بعض قيم px في CSS؟
تُحوَّل قيمة px فقط إذا وقفت طولاً قائماً بذاته. والقيم داخل url()، والنصوص مثل 10pxx أو 10px-2 التي ليست طولاً بسيطاً، تبقى كما هي. افحص أي قيمة غير معتادة يدوياً.
لماذا يتوقف الجدول عند 64 px؟
يعرض الجدول الأحجام التي يستخدمها المصممون أكثر من غيرها. ولأي حجم آخر، اكتبه في مربع القيمة واختر الاتجاه.
المصادر
آخر مراجعة للأرقام والنص: الثلاثاء، 30 جمادى الأولى 1448 بعد الهجرة.