محوّل rem إلى px

يتم قياس وحدات CSS rem من حجم خط العنصر الجذر - عادةً عنصر html - وليس من كل أصل مثل em. واحد rem يساوي حجم البكسل الذي تم تعيين الجذر عليه. المتصفحات الافتراضية هي 16 بكسل جذر، لذا 1 rem = 16 بكسل خارج الصندوق ما لم تتغير ورقة الأنماط الخاصة بك html {font-size }. rem يحترم إعدادات التكبير/التصغير وإمكانية الوصول الخاصة بالمستخدم والتي تعمل على تكبير النص الافتراضي؛ يظل px مطلقًا على شبكة البكسل.

عادةً ما تضيف عمليات تسليم التصميم من Figma وSketch تعليقات توضيحية إلى px، بينما غالبًا ما تقوم قواعد تعليمات الإنتاج بتأليف المسافات والكتابات العينية للتوافق مع رموز التصميم. يعمل هذا المحول على سد الفجوة في حجم الجذر الذي اخترته لمشروعك. تحتفظ العديد من أنظمة التصميم بجذر يبلغ 16 بكسل؛ تقوم بعض الفرق بتعيين جذر 10 بكسل، لذا فإن خرائط الرياضيات الذهنية 1.6 rem ≈ 16 بكسل — تتطابق دائمًا مع القيمة الموجودة في CSS العالمي الخاص بك.

قم بتبديل rem → px أو px → rem باستخدام عنصر التحكم المجزأ. يتم تبديل تسمية حقل القيمة لإظهار الوحدة التي تدخلها. يقوم حقل حجم الخط الجذري بتعيين المضاعف - إذا كانت خدعة html { Font-size: 62.5% } قيد التشغيل، فهذا يعني أن الجذر الفعال هو 10 بيكسل، وليس 16 بيكسل.

مثال عملي مع حقول rem → px الافتراضية: 1.5 rem عند جذر 16 px. اضرب 1.5 × 16 = 24 بكسل نتيجة العنوان. يقرأ الملخص "1.5 rem @ 16 px root" ويظهر صف الصيغة 1.5 × 16. اقلب إلى px → rem مع إدخال 48 px وتحصل على 3 rem (48 ÷ 16).

إدخالات مقياس التباعد الشائعة: 0.25 rem = 4 بكسل، 0.5 rem = 8 بكسل، 1 rem = 16 بكسل، 1.5 rem = 24 بكسل، 2 rem = 32 بكسل في الجذر الافتراضي. غالبًا ما تستخدم خطوات الطباعة 0.875 rem (14 بكسل) لنسخ واجهة المستخدم الصغيرة و1.125 rem (18 بكسل) للنص الكبير المؤهل ضمن حدود تباين النص الكبير WCAG.

تتضمن الأخطاء الشائعة التحويل باستخدام جذر 16 بيكسل بينما يستخدم الإنتاج جذر 10 بيكسل (كل شيء يأتي بحجم أصغر)، وخلط حشو العينية مع ارتفاع سطر em على المكونات المتداخلة، وافتراض الإعداد الافتراضي للمتصفح بعد قيام المستخدم بتغيير حجم نص إمكانية الوصول إلى نظام التشغيل - يتدفق العين مع هذا الإعداد، بينما لا يتدفق px.

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

الحدود: تحويل قيمة واحدة - لا يوجد calc() مع وحدات مختلطة، أو viewport vw، أو نقاط توقفlamp(). قد تظهر نتائج البكسل الفرعي للجذور الفردية؛ المتصفحات مستديرة بكسل في وقت العرض.