محول px إلى rem
أي قيمة إلى em وpt ووحدات النافذة

ماذا يفعل لك محول px إلى rem

البكسلات سهلة التخيل. ووحدات rem أفضل للويب. فهي تتبع حجم النص الذي اختاره الزائر، لذلك تبقى الصفحة مقروءة للجميع. لكن الحساب يبطئك.

محول px إلى rem يجري هذا الحساب في لمح البصر. أولًا، اكتب قيمة بالبكسل. ثم اختر rem وحدة هدف. تظهر الإجابة أثناء الكتابة، وتنسخها بنقرة.

كما أنه يغطي أكثر من البكسل وrem. أيضًا، فهو يتعامل مع em والنقاط والبيكا والبوصات والسنتيمترات والمليمترات والنسبة المئوية وأربع وحدات للنافذة. لذلك تجيب أداة واحدة عن معظم أسئلة قياسات CSS.

كل شيء يعمل في متصفحك. لذلك لا يغادر جهازك أي شيء تكتبه. وهذا مهم حين تلصق ورقة أنماط من مشروع عميل.

معادلة px إلى rem

القاعدة قصيرة. اقسم قيمة البكسل على حجم الخط الجذر. لذلك تعطي 24px مقسومة على 16 القيمة 1.5rem.

العودة تعمل بالطريقة نفسها. اضرب قيمة rem في حجم الخط الجذر. لذلك يعطي 1.5rem مضروبة في 16 القيمة 24px. تفعل الأداة الأمرين في خطوة واحدة. كما تعرض القاعدة لوحدة واحدة لتتعلمها.

لمزيد من التفاصيل، راجع: MDN guide to CSS lengths.

ما هي rem

تعني rem اختصار root em. تساوي rem واحدة حجم خط عنصر html. تضبط المتصفحات هذا الحجم على 16px افتراضيًا. لذلك تعني 1rem القيمة 16px ما لم تغيّرها.

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

rem مقابل em

تساوي em واحدة حجم خط العنصر الحالي. وفي خاصية font-size نفسها تساوي حجم الأب. لذلك تتراكم قيم em. فتنمو 1.2em داخل 1.2em إلى 1.44 مرة من الأساس. لا تملك rem هذا الأثر، لأنها تنظر دائمًا إلى الجذر.

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

ضبط حجم الخط الجذر

تضبط مواقع كثيرة حجم html على 62.5% لتساوي 1rem القيمة 10px. فيسهل الحساب. لكنه يصغّر أيضًا كل نص بلا حجم خاص. لذلك اضبط حجمًا لـ body أيضًا.

لذلك اكتب 10 في خانة الجذر وشاهد القيم تتغير. عندها تفحص موقعك بأساسه الخاص في ثوانٍ.

النقاط والبيكا ووحدات الطباعة

تساوي النقطة الواحدة 1/72 من البوصة، ويضبط CSS البوصة على 96px. لذلك تساوي 12pt القيمة 16px. وتساوي البيكا 12 نقطة، فتبلغ 16px أيضًا. تستخدم أوراق أنماط الطباعة هذه الوحدات جيدًا.

كما تتبع السنتيمترات والمليمترات القاعدة نفسها، مع 2.54 سنتيمتر في البوصة. لذلك يبلغ 1cm نحو 37.8px.

النسبة المئوية ووحدات النافذة

في font-size تُحسب النسبة المئوية على حجم خط الأب. لذلك تعطي 150% من 16px القيمة 24px. وتُحسب وحدات النافذة على النافذة. تساوي vw واحدة 1% من عرضها وvh واحدة 1% من ارتفاعها.

ثم تأخذ vmin وvmax الأصغر أو الأكبر من الاثنين. اكتب حجم نافذتك في الإعدادات، فيعرض الجدول البكسلات التي تعطيها كل وحدة نافذة.

تحويل ورقة أنماط كاملة

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

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

متى تُبقي البكسلات

تبدو الحدود والظلال والخطوط الرفيعة أفضل بالبكسل. لذلك اتركها. كما يجب ألا تتبع استعلامات الوسائط حجمك الجذر، فأبقها بوحدة px أو استخدم em في الاستعلام.

باختصار، استخدم rem للنص والمسافات. ثم استخدم px للخطوط الرفيعة.

ارتفاع السطر والمسافات

اضبط line-height بلا وحدة، مثل 1.5. عندها يتدرج مع الخط من تلقاء نفسه. وفي المسافات تُبقي rem الفراغات متناسقة مع النص، فيكبر الحشو حين يكبر النص.

نص مرن مع clamp

يمكنك مزج الوحدات. مثلًا، يكبر clamp(1rem, 2vw + 0.5rem, 2rem) مع النافذة ويبقى بين حدين. لذلك استخدم الأداة لإيجاد حدّي rem. ثم اكتب القيمة الوسطى بوحدة vw.

لماذا تساعد rem في إمكانية الوصول

تتبع قياسات rem الحجم الذي اختاره الزائر في المتصفح. لذلك يحصل ضعاف البصر على نص أكبر دون جهد إضافي منك. كما تطلب إرشادات الويب أن يكبر النص حتى 200% دون فقد. وتخطيط rem يجعل ذلك سهلًا.

قراءة المخطط

يسرد المخطط أحجامًا شائعة من 8px إلى 96px. لذلك تقرأ قيمة دون كتابة. وهو يتبع حجمك الجذر، فيتغير حين تعدّل الخانة.

آمن بحكم التصميم

أولًا، تعمل الأداة في متصفحك. لا ترسل شيئًا ولا تخزن شيئًا. أيضًا، هكذا يبقى CSS الخاص بك لك.