محوّل rem إلى بكسل (px)
وحدة rem الواحدة تساوي 16 بكسل عند حجم الخط الافتراضي في المتصفح، فـ1.5 rem يساوي 24 بكسل. التحويل عملية ضرب واحدة: القيمة بوحدة rem مضروبة في حجم الخط الأساسي للصفحة. أدخل القيمة في الحقل الأول، وإذا كانت صفحتك تعمل على أساس آخر فاكتبه في حقل الحجم الأساسي.
ما هي وحدة rem، وما البكسل في CSS؟
rem في CSS وحدة طول نسبية، وقيمتها تساوي حجم الخط المحسوب على العنصر الجذر للصفحة[1]، أي على عنصر html. ومن هنا جاء اسمها: root em، أي em العنصر الجذر[2]. فإذا كان حجم خط html يساوي 16 بكسل، كان كل rem في الصفحة 16 بكسل. وإذا تغيّر هذا الحجم، تغيّرت معه كل المقاسات المكتوبة بوحدة rem معًا.
البكسل (px) في CSS وحدة طول ثابتة، ويعرّفها المعيار بأنها جزء من 96 جزءًا من البوصة[1]. فالبوصة في CSS تساوي 96 بكسل، ولذلك تكون الدقة الافتراضية في محوّل البوصات إلى بكسل 96 بكسل لكل بوصة. والبكسل بمعناه العام هو أصغر عنصر منفرد في الصورة النقطية أو في شاشة العرض[3]. أما بكسل CSS الواحد فقد يغطي عدة بكسلات فيزيائية على الشاشة[2]. ولا يتغير البكسل حين يغيّر القارئ حجم الخط في متصفحه. وبالبكسل تعرض برامج التصميم مثل Figma المقاسات، فتحويل rem إلى بكسل يسمح لك بمقارنة ورقة الأنماط بالتصميم.
:root في صفحة HTML يشير إلى عنصر html نفسه، فحجم الخط الذي يُكتب فيه يصبح أساس كل قيمة rem في الصفحة. في الجزء الظاهر من الصورة يضم المحدّد متغيرات للألوان ولا يضبط حجم الخط، فيبقى الأساس هو ما يضبطه المتصفح. الصورة: Pankaj Patel، Unsplash.كم بكسل في 1 rem؟
1 rem يساوي 16 بكسل ما دام حجم الخط الأساسي على قيمته الافتراضية، وهي 16 بكسل في Chrome وEdge وFirefox. والصيغة عملية ضرب واحدة: البكسل = rem × حجم الخط الأساسي. فالقيمة 1.5 rem تساوي 24 بكسل. والقيمة 0.875 rem تساوي 14 بكسل، وهي حجم النص text-sm في Tailwind CSS[4].
الرقم 16 قيمة افتراضية، ويمكن أن يتغير من جهتين. الجهة الأولى ورقة الأنماط: القاعدة html { font-size: 62.5% } تجعل الأساس 10 بكسل، فيصبح 1.5 rem مساويًا لـ15 بكسل. والجهة الثانية القارئ نفسه: حين اخترنا «كبير» من قائمة حجم الخط في إعدادات Chrome، صار حجم خط عنصر html يساوي 20 بكسل، فأصبح 1 rem مساويًا لـ20 بكسل.
لهذا يضم المحوّل حقلًا ثالثًا للحجم الأساسي. اكتب فيه الأساس الذي تعمل عليه صفحتك، فتحصل على البكسل الذي يراه قارئ تلك الصفحة. وإذا لم تعرف أساس الصفحة، فابدأ بالقيمة 16 الموجودة في الحقل عند فتح المحوّل، فهي الحالة الافتراضية في المتصفحات الثلاثة.
كيف أحوّل rem إلى px؟ الصيغة مع مثال
الصيغة هي px = rem × font-size، وfont-size هنا حجم خط عنصر html. خذ مسافة قدرها 1.25 rem مثالًا. عند الأساس الافتراضي 16 بكسل تعطي 1.25 × 16 = 20 بكسل. وعند الأساس 20 بكسل تعطي المسافة نفسها 25 بكسل.
تقنية 62.5% تضبط حجم خط html على 62.5% من الحجم الافتراضي، فيصير الأساس 10 بكسل، لأن 62.5% من 16 تساوي 10. عندها تقرأ القيمة مباشرة: 2.4 rem تساوي 24 بكسل. وإذا رفع القارئ حجم الخط في متصفحه إلى 20 بكسل، صار الأساس 12.5 بكسل، وصارت 2.4 rem مساوية لـ30 بكسل. وحقل الحجم الأساسي في المحوّل يقبل النسبة كما تكتبها في ورقة الأنماط، ويحسبها من الأساس الافتراضي 16 بكسل: اكتب فيه 62.5% فيعمل على أساس 10 بكسل.
الصيغة نفسها تعمل في الاتجاه المعاكس بالقسمة، وهذا ما يفعله محوّل البكسل إلى rem. أما وحدة em فتُحسب من حجم خط العنصر الأب، ولها محوّل em إلى بكسل بحقل لحجم خط الأب. وإذا كان المقاس مكتوبًا بالنقاط (pt)، وهي وحدة حجم الخط في برامج تحرير النصوص، فحوّله إلى البكسل في محوّل النقاط إلى بكسل.
14px ثم 0.875rem. السطر الثاني يأتي بعد الأول، فيطبّق المتصفح 0.875rem. عند الأساس 16 بكسل يعطي ذلك 14 بكسل، أي الحجم نفسه، لأن 0.875 × 16 = 14. وعند الأساس 20 بكسل يصير النص 17.5 بكسل. الصورة: Nick Karvounis، Unsplash.جدول تحويل rem إلى بكسل عند ثلاثة أحجام أساسية
| القيمة بوحدة rem | عند 16 بكسل (الافتراضي) | عند 10 بكسل (62.5%) | عند 20 بكسل («كبير») |
|---|---|---|---|
| 0.125 rem | 2 px | 1.25 px | 2.5 px |
| 0.25 rem | 4 px | 2.5 px | 5 px |
| 0.375 rem | 6 px | 3.75 px | 7.5 px |
| 0.5 rem | 8 px | 5 px | 10 px |
| 0.625 rem | 10 px | 6.25 px | 12.5 px |
| 0.75 rem | 12 px | 7.5 px | 15 px |
| 0.8 rem | 12.8 px | 8 px | 16 px |
| 0.875 rem | 14 px | 8.75 px | 17.5 px |
| 0.9 rem | 14.4 px | 9 px | 18 px |
| 1 rem | 16 px | 10 px | 20 px |
| 1.1 rem | 17.6 px | 11 px | 22 px |
| 1.125 rem | 18 px | 11.25 px | 22.5 px |
| 1.2 rem | 19.2 px | 12 px | 24 px |
| 1.25 rem | 20 px | 12.5 px | 25 px |
| 1.3 rem | 20.8 px | 13 px | 26 px |
| 1.375 rem | 22 px | 13.75 px | 27.5 px |
| 1.4 rem | 22.4 px | 14 px | 28 px |
| 1.5 rem | 24 px | 15 px | 30 px |
| 1.6 rem | 25.6 px | 16 px | 32 px |
| 1.625 rem | 26 px | 16.25 px | 32.5 px |
| 1.75 rem | 28 px | 17.5 px | 35 px |
| 1.8 rem | 28.8 px | 18 px | 36 px |
| 1.875 rem | 30 px | 18.75 px | 37.5 px |
| 2 rem | 32 px | 20 px | 40 px |
| 2.25 rem | 36 px | 22.5 px | 45 px |
| 2.5 rem | 40 px | 25 px | 50 px |
| 2.75 rem | 44 px | 27.5 px | 55 px |
| 3 rem | 48 px | 30 px | 60 px |
| 3.5 rem | 56 px | 35 px | 70 px |
| 3.75 rem | 60 px | 37.5 px | 75 px |
| 4 rem | 64 px | 40 px | 80 px |
| 4.5 rem | 72 px | 45 px | 90 px |
| 5 rem | 80 px | 50 px | 100 px |
| 6 rem | 96 px | 60 px | 120 px |
| 8 rem | 128 px | 80 px | 160 px |
| 10 rem | 160 px | 100 px | 200 px |
| 16 rem | 256 px | 160 px | 320 px |
| 20 rem | 320 px | 200 px | 400 px |
| 32 rem | 512 px | 320 px | 640 px |
كم بكسل تساوي أحجام الخط في Tailwind CSS؟
| الفئة في Tailwind | القيمة بوحدة rem | بالبكسل عند 16 | بالبكسل عند 20 |
|---|---|---|---|
| text-xs | 0.75 rem | 12 px | 15 px |
| text-sm | 0.875 rem | 14 px | 17.5 px |
| text-base | 1 rem | 16 px | 20 px |
| text-lg | 1.125 rem | 18 px | 22.5 px |
| text-xl | 1.25 rem | 20 px | 25 px |
| text-2xl | 1.5 rem | 24 px | 30 px |
| text-3xl | 1.875 rem | 30 px | 37.5 px |
| text-4xl | 2.25 rem | 36 px | 45 px |
| text-5xl | 3 rem | 48 px | 60 px |
| text-6xl | 3.75 rem | 60 px | 75 px |
| text-7xl | 4.5 rem | 72 px | 90 px |
| text-8xl | 6 rem | 96 px | 120 px |
| text-9xl | 8 rem | 128 px | 160 px |
ما الحجم الأساسي الذي يضبطه كل خيار في قائمة «حجم الخط» في Chrome وEdge؟
| الخيار في Chrome | الخيار في Edge | الحجم الأساسي، أي 1 rem | 0.875 rem | 1.5 rem | 2 rem |
|---|---|---|---|---|---|
| صغير جدًا | حجم خط صغير جداً | 9 px | 7.88 px | 13.5 px | 18 px |
| صغير | حجم خط صغير | 12 px | 10.5 px | 18 px | 24 px |
| متوسط (موصى به) | حجم خط متوسط (مستحسن) | 16 px | 14 px | 24 px | 32 px |
| كبير | حجم خط كبير | 20 px | 17.5 px | 30 px | 40 px |
| كبير جدًا | حجم خط كبير جداً | 24 px | 21 px | 36 px | 48 px |
أي صيغ الكتابة يقبلها هذا المحوّل ويحسبها؟
| ما تكتبه أو تلصقه | ما يحسبه المحوّل | ما يحدث بهذه الصيغة |
|---|---|---|
| الحقل الأول: القيمة بوحدة rem، والأساس 16 بكسل | ||
| 1.5 | 24 px | الكتابة كما في ورقة الأنماط: نقطة عشرية وأرقام لاتينية، فنضرب 1.5 في 16. |
| 1,5 | 24 px | الفاصلة التي يليها رقم أو رقمان نقرؤها فاصلة عشرية، كما يكتب القارئ في المغرب الأعداد. |
| 1،5 | 24 px | الفاصلة العربية «،» التي يكتبها مفتاح الفاصلة في لوحة المفاتيح العربية نقرؤها فاصلة عشرية أيضًا. |
| ١٫٥ | 24 px | الأرقام المشرقية مع الفاصلة العشرية العربية «٫»، كما تُكتب الأعداد في مصر والسعودية، نحوّلها إلى 1.5. |
| .875rem | 14 px | قيمة من ملف CSS مضغوط، بلا صفر قبل النقطة ومعها اسم الوحدة: نقرأ 0.875 ونترك كلمة rem. |
| font-size: 1.5rem; | 24 px | سطر كامل من ورقة الأنماط: نأخذ الرقم ونترك اسم الخاصية والفاصلة المنقوطة. |
| --text-sm: 0.875rem; | 14 px | سطر من متغيرات Tailwind CSS: الشرطتان في أول اسم المتغير ليستا إشارة سالبة. |
| margin-top: -0.5rem; | -8 px | هامش سالب من ورقة الأنماط: الشرطة الملاصقة للرقم إشارة سالبة، فيخرج الناتج سالبًا. |
| 1,125rem | 18 px | الفاصلة الملاصقة لكلمة rem نقرؤها فاصلة عشرية حتى لو تلتها ثلاثة أرقام، لأن CSS لا تكتب الآلاف بفاصلة. ويظهر تحت الحقل تلميح بالقراءة الأخرى الممكنة، 1125. |
| 1,125 | 18000 px | من غير وحدة ملاصقة، الفاصلة التي تليها ثلاثة أرقام بالضبط نقرؤها فاصل آلاف، كما تُكتب الأعداد الكبيرة في الإمارات، فالناتج 1125 rem. ويظهر تحت الحقل تلميح بالقراءة الأخرى الممكنة، 1.125. |
| 3/4 | 12 px | كسر عادي: نقسم 3 على 4 فنحصل على 0.75 rem. |
| حقل «حجم الخط الأساسي (font-size)»: ما يحسبه المحوّل هو الأساس | ||
| 62.5% | 10 px | النسبة كما تكتبها على عنصر html: نحسبها من الأساس الافتراضي، و62.5% من 16 تساوي 10. |
| ٦٢٫٥٪ | 10 px | النسبة نفسها بالأرقام المشرقية وعلامة النسبة العربية «٪». |
| 125% | 20 px | نسبة أكبر من 100%: 125% من 16 تساوي 20، وهو الأساس الذي يعطيه الخيار «كبير» في Chrome. |
| font-size: 20px | 20 px | سطر منسوخ من أدوات المطوّر: نأخذ الرقم ونترك اسم الخاصية والوحدة. |
| 18,5 | 18.5 px | أساس بكسر عشري بعد الفاصلة، ويقبله الحقل ما دام بين 1 و100. |
كيف أغيّر حجم الخط الأساسي في Chrome وEdge وFirefox وSafari؟
في Chrome وEdge وFirefox يصبح الحجم الذي يختاره القارئ أساس كل قيمة rem في الصفحات التي يفتحها. وأسماء الإعدادات هنا كما تظهر في واجهة كل متصفح باللغة العربية.
Chrome
افتح الإعدادات، ثم المظهر، واختر من القائمة حجم الخط. والزر تخصيص الخطوط يفتح صفحة فيها منزلق حجم الخط ومنزلق الحد الأدنى لحجم الخط.Edge
افتح الإعدادات، ثم المظهر، ثم خطوط، واختر من القائمة حجم الخط. أسماء الخيارات فيها تبدأ بعبارة «حجم خط»، والخيار الأوسط هو حجم خط متوسط (مستحسن). وتحت القائمة الحد الأدنى لحجم الخط.Firefox
افتح الإعدادات، ثم الإتاحة، ثم قسم الخطوط، واختر رقمًا من القائمة حجم الخط. يحفظ Firefox هذا الحجم لكل نظام كتابة على حدة، ويعرف نظام الصفحة من خاصيةlang. في قياسنا ضبطنا حجم الخط العربي على 20 بكسل، فصار 1 rem مساويًا لـ20 بكسل في صفحةlang="ar"، وبقي 16 بكسل في صفحة بلاlang. والزر إعدادات متقدّمة يفتح نافذة الخطوط لكل نظام كتابة، وفيها الحجم الأدنى للخط.Safari على Mac
اختر سفاري، ثم الإعدادات، ثم متقدم. هنا يضبط Safari الحد الأدنى فقط: فعّل الخيار «يجب عدم استخدام أحجام خطوط أقل من» واختر رقمًا، وتقترح Apple القيمة 12 أو 14[5].
لماذا تُكتب أحجام النص بوحدة rem؟
النص المكتوب بوحدة rem يكبر حين يرفع القارئ حجم الخط في متصفحه، والنص المكتوب بالبكسل يبقى على مقاسه. وهذا ما يتناوله المعيار 1.4.4 «تغيير حجم النص» في مبادئ النفاذ إلى محتوى الويب، ونصه في الترجمة العربية المعتمدة: «يمكن تغيير حجم النص باستثناء نصوص الشرح و صور النصوص إلى 200% دون استخدام التقنيات المساعدة أو خسارة المحتوى أو الوظيفة.»[6] والتحويل إلى البكسل يفيدك حين تقارن النتيجة بالتصميم، أما ورقة الأنماط فتبقى بوحدة rem.
تحويل وحدات أخرى إلى بكسل
المصادر
- CSS Values and Units Module Level 4 — W3C
- القيمة <length> — موسوعة حسوب
- بكسل — ويكيبيديا
- font-size — Tailwind CSS
- تغيير إعدادات الجزء متقدم في سفاري على الـ Mac — Apple
- مبادئ النفاذ إلى محتوى الويب 2.1 — W3C، ترجمة مركز مدى
حسبنا كل القيم في الجداول من تعريفات الوحدات وتحققنا منها بالحساب قبل النشر. تستند البيانات التاريخية وأسماء الوحدات المحلية إلى المصادر المذكورة أعلاه.
آخر مراجعة للمحتوى: · كتبه وراجعه فريق Arteon
أسئلة شائعة عن تحويل rem إلى بكسل
هل 1 rem يساوي 16 بكسل دائمًا؟
يساوي 16 بكسل ما دام حجم الخط الأساسي على قيمته الافتراضية. فإذا كتبت الصفحة حجمًا آخر لعنصر html، أو غيّر القارئ حجم الخط في متصفحه، تغيّر معه 1 rem. عند الخيار «كبير» في Chrome مثلًا يصير 1 rem مساويًا لـ20 بكسل.
كم بكسل في 1.5 rem؟
1.5 rem يساوي 24 بكسل عند الأساس الافتراضي 16 بكسل. وعند الأساس 10 بكسل يساوي 15 بكسل، وعند الأساس 20 بكسل يساوي 30 بكسل.
كم بكسل في 2 rem و0.5 rem؟
2 rem يساوي 32 بكسل عند الأساس 16 بكسل، و0.5 rem يساوي 8 بكسل. والقيمتان تتغيران مع الأساس: عند الأساس 20 بكسل يصير 2 rem مساويًا لـ40 بكسل، ويصير 0.5 rem مساويًا لـ10 بكسل.
ما الفرق بين rem وem؟
وحدة rem تُحسب دائمًا من حجم خط عنصر html، فقيمتها واحدة في الصفحة كلها. ووحدة em تُحسب من حجم خط العنصر الأب، فالقيمة 1.5em داخل عنصر حجم خطه 20 بكسل تساوي 30 بكسل. ولتحويل em استعمل محوّل em إلى بكسل.
هل يغيّر تكبير الصفحة قيمة 1 rem؟
في قياسنا على Chrome بقي 1 rem مساويًا لـ16 بكسل بعد تكبير الصفحة إلى 125%. فالتكبير من القائمة تكبير/تصغير الصفحة يكبّر كل ما في الصفحة معًا، ما كُتب بوحدة rem وما كُتب بالبكسل. أما تغيير حجم الخط فيغيّر قيمة rem وحدها.
هل يغيّر الحد الأدنى لحجم الخط حساب rem؟
في قياسنا على Chrome وFirefox لم يغيّره. ضبطنا الحد الأدنى على 12 بكسل في صفحة تكتب html { font-size: 62.5% }. فبقي 2.4 rem يساوي 24 بكسل، أي أن rem ما زال يُحسب من الأساس 10 بكسل.
كيف أعرف الحجم الأساسي لموقع معيّن؟
افتح أدوات المطوّر في Chrome، واختر عنصر html في لوحة العناصر، ثم افتح تبويب الأنماط التي تم احتسابها وابحث عن font-size. الرقم الظاهر هناك هو الأساس الذي تُحسب منه rem في هذه الصفحة الآن، بعد إعداد الموقع وإعداد القارئ معًا.
هل تستعمل Tailwind CSS وحدة rem؟
نعم، أحجام الخط في Tailwind CSS مكتوبة بوحدة rem. فالفئة text-base تساوي 1 rem، أي 16 بكسل عند الأساس الافتراضي، والفئة text-2xl تساوي 1.5 rem، أي 24 بكسل.
لماذا تظهر النتيجة بكسور مثل 17.5 بكسل؟
لأن الضرب في أساس آخر غير 16 قد يعطي كسرًا: 0.875 rem عند الأساس 20 بكسل تساوي 17.5 بكسل. والمحوّل يعرض الناتج بخانتين عشريتين على الأكثر، والمتصفح يقبل هذه الكسور في الصفحة.
ساعدنا في تحسين الأدوات
وجدت رقمًا لا يطابق ما يعرضه متصفحك، أو لديك فكرة تحسّن المحوّل؟ اكتب لنا.