ما هو محول REM إلى PX؟
محول REM إلى PX هو أداة تحوّل وحدات الـ em النسبية (REM) إلى بكسل (PX). في تطوير الويب، تُعدّ وحدة REM وحدة نسبية تعتمد على حجم خط العنصر الجذري (وهو غالباً العنصر <html>)، بينما تُعدّ وحدة PX وحدة مطلقة. يساعد هذا المحول المطورين على الحفاظ على تصاميم قابلة للتوسّع وسهلة الوصول، مع فهم قيمة البكسل الفعلية المقابلة لوحدات REM.
متى تستخدم محول REM إلى PX؟
يكون هذا المحول مفيداً بشكل خاص في الحالات التالية:
- عند تصميم مواقع متجاوبة وتحتاج إلى التحويل بين الوحدات النسبية والمطلقة.
- عند العمل مع أنظمة تصميم تعتمد على وحدات REM بينما تحتاج إلى قيم البكسل كمرجع.
- عند تنفيذ تصاميم مأخوذة من نماذج أولية (mockups) تُقدَّم قياساتها بالبكسل، لكنك تفضّل البرمجة باستخدام وحدات REM.
كيفية حساب التحويل من REM إلى PX
يتبع التحويل من REM إلى PX معادلة بسيطة:
PX = REM × حجم الخط الجذري
حيث:
- PX هي قيمة البكسل الناتجة.
- REM هي قيمة الـ em النسبية المراد تحويلها.
- حجم الخط الجذري هو حجم الخط الأساسي لعنصر html (وهو افتراضياً 16px في معظم المتصفحات).
وبما أن قيمة rem نسبية وتعتمد على حجم الخط الجذري، فهذا يعني أنك إذا حدّدت حجم خط 16px للعنصر <html> في ملف CSS الخاص بك، على هذا النحو:
فهذا يعني أن 1rem = 16px.
أمثلة
تحويل بسيط من REM إلى PX
حوّل 1.5rem إلى بكسل باستخدام حجم الخط الجذري الافتراضي 16px.
| قيمة REM | حجم الخط الجذري | الحساب | النتيجة |
|---|---|---|---|
| 1.5rem | 16px | 1.5 × 16 | 24px |
تحويل عدة قيم REM
حوّل القيم 0.75rem و2rem و3.5rem إلى بكسل باستخدام حجم خط جذري قدره 16px.
| قيمة REM | حجم الخط الجذري | الحساب | النتيجة |
|---|---|---|---|
| 0.75rem | 16px | 0.75 × 16 | 12px |
| 2rem | 16px | 2 × 16 | 32px |
| 3.5rem | 16px | 3.5 × 16 | 56px |
حجم خط جذري مخصّص
حوّل 2.5rem إلى بكسل باستخدام حجم خط جذري مخصّص قدره 20px.
| قيمة REM | حجم الخط الجذري | الحساب | النتيجة |
|---|---|---|---|
| 2.5rem | 20px | 2.5 × 20 | 50px |
جدول التحويل الشائع من REM إلى PX
إليك جدولاً مرجعياً لقيم REM الشائعة محوَّلة إلى بكسل (اعتماداً على حجم الخط الجذري الافتراضي 16px):
| قيمة REM | قيمة البكسل |
|---|---|
| 0.25 rem | ٤ px |
| 0.5 rem | ٨ px |
| 0.75 rem | ١٢ px |
| 0.875 rem | ١٤ px |
| 1 rem | ١٦ px |
| 1.125 rem | ١٨ px |
| 1.25 rem | ٢٠ px |
| 1.5 rem | ٢٤ px |
| 1.875 rem | ٣٠ px |
| 2 rem | ٣٢ px |
| 2.25 rem | ٣٦ px |
| 2.5 rem | ٤٠ px |
| 3 rem | ٤٨ px |
| 4 rem | ٦٤ px |
| 5 rem | ٨٠ px |
حاسبات ذات صلة
لاستكشاف المزيد من أدوات تطوير الويب والتصميم، اطّلع على هذه الحاسبات ذات الصلة:
