ما هو محول البكسل إلى REM؟
محول البكسل إلى REM هو أداة تحوّل قيم البكسل (px) إلى وحدات rem، وهي وحدات نسبية تعتمد على حجم خط العنصر الجذري (root) في لغة CSS. يُعدّ هذا التحويل ضروريًا لإنشاء تصاميم ويب متجاوبة وسهلة الوصول تتكيّف بشكل سليم مع مختلف أحجام الشاشات وتفضيلات المستخدمين.
متى تستخدم محول البكسل إلى REM؟
يُنصح باستخدام محول البكسل إلى REM في الحالات التالية:
- عند تطوير مواقع متجاوبة تحتاج إلى التكيّف بشكل متناسب عبر الأجهزة المختلفة.
- عند إنشاء تصاميم سهلة الوصول تحترم تفضيلات المستخدم لحجم الخط.
- عند تحويل تصميم قائم من الوحدات المطلقة (البكسل) إلى الوحدات النسبية (rem) لتسهيل الصيانة على المدى الطويل.
كيفية حساب التحويل من البكسل إلى REM
معادلة تحويل البكسل إلى rem هي:
rem = البكسل ÷ حجم الخط الجذري
حيث:
- rem هي القيمة الناتجة بوحدات rem.
- البكسل هو قيمة البكسل التي تريد تحويلها.
- حجم الخط الجذري هو حجم الخط الأساسي للعنصر الجذري (وعادةً ما يكون 16 بكسل في معظم المتصفحات).
أمثلة
المثال الأول: تحويل حجم عنوان من البكسل إلى rem
حوّل حجم عنوان يبلغ 24px إلى rem باستخدام حجم الخط الجذري الافتراضي 16px.
| المُدخل | الحساب | النتيجة |
|---|---|---|
| قيمة البكسل: 24px حجم الخط الجذري: 16px |
24 ÷ 16 | 1.5rem |
المثال الثاني: تحويل قيمة هامش مع حجم خط جذري مخصّص
حوّل هامشًا يبلغ 40px إلى rem باستخدام حجم خط جذري مخصّص يبلغ 20px.
| المُدخل | الحساب | النتيجة |
|---|---|---|
| قيمة البكسل: 40px حجم الخط الجذري: 20px |
40 ÷ 20 | 2rem |
المثال الثالث: تحويل قيمة حشو (padding) صغيرة
حوّل حشوًا يبلغ 8px إلى rem باستخدام حجم الخط الجذري الافتراضي 16px.
| المُدخل | الحساب | النتيجة |
|---|---|---|
| قيمة البكسل: 8px حجم الخط الجذري: 16px |
8 ÷ 16 | 0.5rem |
تحويلات شائعة من البكسل إلى REM
إليك جدولًا مرجعيًا لأكثر قيم البكسل استخدامًا بعد تحويلها إلى rem (استنادًا إلى حجم الخط الجذري القياسي 16px):
| البكسل | REM |
|---|---|
| 4 px | ٠٫٢٥ rem |
| 8 px | ٠٫٥ rem |
| 12 px | ٠٫٧٥ rem |
| 14 px | ٠٫٨٨ rem |
| 15 px | ٠٫٩٤ rem |
| 16 px | ١ rem |
| 18 px | ١٫١٢ rem |
| 20 px | ١٫٢٥ rem |
| 24 px | ١٫٥ rem |
| 25 px | ١٫٥٦ rem |
| 32 px | ٢ rem |
| 40 px | ٢٫٥ rem |
| 48 px | ٣ rem |
| 56 px | ٣٫٥ rem |
| 64 px | ٤ rem |
| 80 px | ٥ rem |
| 300 px | ١٨٫٧٥ rem |
مزايا استخدام REM بدلًا من البكسل
يوفّر استخدام وحدات rem في ملفات CSS عدّة مزايا:
- سهولة وصول أفضل، إذ تتكيّف وحدات rem مع إعدادات حجم الخط في متصفح المستخدم.
- تجاوب أسهل عبر تغيير حجم الخط الجذري فقط داخل استعلامات الوسائط (media queries).
- تكيّف أكثر اتساقًا عبر جميع العناصر.
- صيانة أيسر بفضل العلاقات المتناسبة بين العناصر.
حاسبات ذات صلة
قد تجد هذه الحاسبات المرتبطة مفيدة أيضًا:
