تحويل Px إلى Rem

محول px إلى rem سريع ومحلي

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

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

لماذا يجب تحويل البكسل إلى rem؟

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

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

كيف تعمل حاسبة CSS rem

العملية الحسابية للتحويل بسيطة، لكن حسابها ذهنياً بشكل متكرر قد يبطئ سير عملك. معادلة تحويل البكسل إلى rem هي:

البكسل المستهدف ÷ حجم الخط الأساسي = قيمة Rem

افتراضياً، تستخدم جميع متصفحات الويب تقريباً حجم خط أساسي يبلغ 16px. إذا كنت تريد عرض عنوان بحجم 32px على شاشة قياسية، فستقسم 32 على 16، لتحصل على 2rem.

إذا كنت تعمل على شيفرة برمجية موجودة وتحتاج إلى معرفة الحجم الفعلي للوحدة النسبية، يمكنك استخدام الأداة لتحويل rem إلى px. تُعكس المعادلة ببساطة كالتالي:

قيمة Rem × حجم الخط الأساسي = قيمة البكسل

تتعامل هذه الحاسبة مع كلا الاتجاهين في آنٍ واحد. ما عليك سوى الكتابة في أي من الحقلين، وسيُحدَّث الحقل الآخر فوراً. كما أنها تُقرّب الأرقام العشرية المعقدة إلى أربع منازل، مما يحافظ على كود CSS نظيفاً ومقروءاً دون التضحية بالدقة.

العمل مع أحجام خطوط أساسية مخصصة

رغم أن 16px هو معيار الويب، إلا أن بعض المشاريع تُعدّل حجم الخط الجذري. من التقنيات الشائعة جداً في الشيفرات البرمجية القديمة "خدعة 62.5%". حيث كان المطورون يكتبون html { font-size: 62.5%; } في كود CSS. وبما أن 62.5% من الحجم الافتراضي 16px تساوي 10px بالضبط، فإن هذا يغير حجم الخط الأساسي إلى 10.

مع أساس 10، تصبح الحسبة في غاية السهولة: 24px تعادل 2.4rem، و 18px تعادل 1.8rem، وهكذا. إذا كنت تعمل على مشروع يستخدم هذه التقنية، أو أي حجم جذري مخصص آخر، فما عليك سوى تغيير حقل حجم الخط الأساسي في الحاسبة. تقبل الأداة أي أساس بين 1 و 100، وستعيد حساب قيمك الحالية فوراً وتُحدّث جدول المراجع بالكامل.

ما وراء تنسيق النصوص: المسافات والتخطيطات

على الرغم من أن وحدات rem تُعرف غالباً باستخدامها مع font-size، إلا أنها لا تقل أهمية لخصائص التخطيط. توصي أفضل ممارسات CSS الحديثة باستخدام الوحدات النسبية في:

• الهوامش الخارجية والداخلية: لضمان تمدد المسافات البيضاء بين العناصر عند تكبير النص، مما يمنع تكدس التخطيط.
• العرض والارتفاع: لتصميم أزرار أو حقول إدخال تتمدد بشكل طبيعي لتناسب النص الموجود بداخلها.
• استعلامات الوسائط: تحديد نقاط التوقف (breakpoints) بوحدات rem أو em يضمن استجابة التخطيط بناءً على الحجم الفعلي للنص، وليس فقط العرض الفعلي للشاشة.

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

استخدام الجدول المرجعي السريع

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

يُحَدَّث هذا الجدول في الوقت الفعلي عند تغيير حجم الخط الأساسي. ويُعد بمثابة دليل مرجعي سريع لتدرجات المسافات القياسية (مثل 16 و 24 و 32 و 48 بكسل)، مما يوفر عليك عناء إدخال كل قيمة على حدة في الحاسبة. وإذا احتجت إلى تحويل قياسات فيزيائية أخرى، يمكنك أيضاً استخدام أداة محول الوحدات العام.