محوّل البكسل (px) إلى rem

آخر مراجعة للمحتوى:2026-09-23

24 بكسل تساوي 1.5 rem عند الحجم الأساسي الافتراضي 16 بكسل، و14 بكسل تساوي 0.875 rem. التحويل قسمة واحدة: المقاس بالبكسل مقسومًا على حجم الخط الأساسي. اكتب المقاس المأخوذ من التصميم في الحقل الأول، وإذا كانت صفحتك تضبط أساسًا آخر فاكتبه في حقل الحجم الأساسي.

بكسل

rem

حجم الخط الأساسي (font-size)

إلى

ما هي وحدة rem، ولماذا تُكتب بها مقاسات البكسل؟

ملفات التصميم تعطي المقاسات بالبكسل: خط العنوان 28 بكسل، والمسافة بين قسمين 32 بكسل. والبكسل في CSS وحدة ثابتة، ويعرّفها المعيار بأنها جزء من 96 جزءًا من البوصة[1]، ولهذا يعدّ محوّل البكسل إلى بوصات عند دقته الافتراضية 96 بكسل في البوصة الواحدة. أما وحدة rem فطول نسبي، والواحد منها يساوي حجم الخط المحسوب على عنصر html، أي العنصر الجذر للصفحة[1].

وتذكر موسوعة حسوب أن rem أُضيفت لحل مشكلة التراكم في وحدة em، فقيمها نسبية إلى حجم الخط في العنصر الجذر، ولا تتأثر بالعنصر الأب[2]. لذلك يكفي أن تعرف حجم خط عنصر html لتحوّل أي مقاس بالبكسل إلى rem. وبعد التحويل يتبع المقاس إعداد القارئ: العنوان الذي كان 24 بكسل يبقى 24 بكسل عند الإعداد الافتراضي، ويصير 30 بكسل عند القارئ الذي اختار «كبير» في Chrome أو «حجم خط كبير» في Edge.

شيفرة CSS فيها القاعدة .hero بحجم خط 60px وقاعدة للعناوين بحجم خط 220px — حجما الخط في هذه الصورة مكتوبان بالبكسل: `60px` في القاعدة `.hero`، و`220px` في القاعدة التي تجمع `.heading` و`.sub-heading`. عند الأساس 16 بكسل يصير الأول `3.75rem` والثاني `13.75rem`، وبعدها يكبر الحجمان مع إعداد القارئ. الصورة: Ferenc Almasi، Unsplash.

كم rem في 24 بكسل؟

24 بكسل تساوي 1.5 rem عند حجم الخط الأساسي الافتراضي 16 بكسل. والصيغة قسمة واحدة: rem = البكسل ÷ حجم الخط الأساسي. فكل 16 بكسل تساوي 1 rem، والبكسل الواحد يساوي 0.0625 rem. ومن هنا يصير المقاس 8 بكسل مساويًا لـ0.5 rem. ويصير المقاس 32 بكسل مساويًا لـ2 rem.

إذا كانت ورقة الأنماط تضبط أساسًا آخر، فالقسمة تكون عليه هو. مع تقنية 62.5% يصبح الأساس 10 بكسل، فتصير 24 بكسل مساوية لـ2.4 rem. ومع أساس 20 بكسل تصير 24 بكسل مساوية لـ1.2 rem. اكتب الأساس في الحقل الثالث، فيعطيك المحوّل القيمة التي تكتبها في ورقة الأنماط.

بعض المقاسات لا تنقسم على 16 قسمة تامة، ولهذا تظهر النتيجة بأربع خانات عشرية على الأكثر. فالمقاس 13 بكسل يساوي 0.8125 rem، وCSS تقبل هذا الرقم كما هو. وزر «نسخ النتيجة» ينسخ الرقم وحده بنقطة عشرية، فتلصقه في ورقة الأنماط وتكتب بعده كلمة rem.

ما صيغة تحويل البكسل إلى rem؟

الصيغة هي rem = px ÷ font-size، وfont-size هنا حجم خط عنصر html. خذ عنوانًا حجمه 28 بكسل في التصميم. عند الأساس 16 بكسل تعطي 28 ÷ 16 = 1.75، فتكتب في ورقة الأنماط font-size: 1.75rem.

المقاسات التي تقبل القسمة على 4 تعطي قيمة بخانتين عشريتين على الأكثر، فالمقاس 12 بكسل يساوي 0.75 rem. وبقية المقاسات الزوجية تعطي ثلاث خانات، مثل المقاس 14 بكسل الذي يساوي 0.875 rem، والمقاسات الفردية تعطي أربع خانات، مثل المقاس 15 بكسل الذي يساوي 0.9375 rem. أما مقاس مثل 13.5 بكسل فتظهر فيه خانة خامسة، لذلك تُقرَّب النتيجة إلى أربع خانات وتصبح 0.8438 rem.

وللاتجاه المعاكس استعمل محوّل rem إلى بكسل. وإذا احتجت قيمة نسبية إلى حجم خط العنصر الأب، فحوّل المقاس في محوّل البكسل إلى em. وإذا كان المقاس في الملف بالنقاط (pt)، فحوّله إلى البكسل أولًا في محوّل النقاط إلى بكسل.

شيفرة CSS مضغوطة تظهر فيها مقاسات بالبكسل مثل font-size:13px وmargin:16px 0 20px — هذه ورقة أنماط مضغوطة، وكل المقاسات الظاهرة فيها بالبكسل. عند الأساس 16 بكسل يصير `font-size:13px` مساويًا لـ`0.8125rem`. ويصير `margin:16px 0 20px` مساويًا لـ`1rem 0 1.25rem`. الصورة: Rahul Mishra، Unsplash.

جدول تحويل البكسل إلى rem عند ثلاثة أحجام أساسية

المقاسات من 1 إلى 400 بكسل. العمود الأول للأساس الافتراضي 16 بكسل، والثاني لتقنية 62.5% التي تجعل الأساس 10 بكسل، والثالث للأساس 20 بكسل عند القارئ الذي اختار «كبير» في Chrome. والصفّان المميّزان هما 16 و24 بكسل.

المقاس بالبكسل	بوحدة rem عند 16 بكسل	بوحدة rem عند 10 بكسل	بوحدة rem عند 20 بكسل
1 px	0.0625 rem	0.1 rem	0.05 rem
2 px	0.125 rem	0.2 rem	0.1 rem
4 px	0.25 rem	0.4 rem	0.2 rem
6 px	0.375 rem	0.6 rem	0.3 rem
8 px	0.5 rem	0.8 rem	0.4 rem
10 px	0.625 rem	1 rem	0.5 rem
11 px	0.6875 rem	1.1 rem	0.55 rem
12 px	0.75 rem	1.2 rem	0.6 rem
13 px	0.8125 rem	1.3 rem	0.65 rem
14 px	0.875 rem	1.4 rem	0.7 rem
15 px	0.9375 rem	1.5 rem	0.75 rem
16 px	1 rem	1.6 rem	0.8 rem
17 px	1.0625 rem	1.7 rem	0.85 rem
18 px	1.125 rem	1.8 rem	0.9 rem
20 px	1.25 rem	2 rem	1 rem
22 px	1.375 rem	2.2 rem	1.1 rem
24 px	1.5 rem	2.4 rem	1.2 rem
25 px	1.5625 rem	2.5 rem	1.25 rem
26 px	1.625 rem	2.6 rem	1.3 rem
28 px	1.75 rem	2.8 rem	1.4 rem
30 px	1.875 rem	3 rem	1.5 rem
32 px	2 rem	3.2 rem	1.6 rem
36 px	2.25 rem	3.6 rem	1.8 rem
40 px	2.5 rem	4 rem	2 rem
44 px	2.75 rem	4.4 rem	2.2 rem
48 px	3 rem	4.8 rem	2.4 rem
50 px	3.125 rem	5 rem	2.5 rem
56 px	3.5 rem	5.6 rem	2.8 rem
60 px	3.75 rem	6 rem	3 rem
64 px	4 rem	6.4 rem	3.2 rem
72 px	4.5 rem	7.2 rem	3.6 rem
80 px	5 rem	8 rem	4 rem
96 px	6 rem	9.6 rem	4.8 rem
100 px	6.25 rem	10 rem	5 rem
120 px	7.5 rem	12 rem	6 rem
128 px	8 rem	12.8 rem	6.4 rem
160 px	10 rem	16 rem	8 rem
192 px	12 rem	19.2 rem	9.6 rem
200 px	12.5 rem	20 rem	10 rem
256 px	16 rem	25.6 rem	12.8 rem
320 px	20 rem	32 rem	16 rem
400 px	25 rem	40 rem	20 rem

حسب المحوّل كل خلية بقسمة المقاس على الحجم الأساسي، وكتبها بأربع خانات عشرية على الأكثر، كما يعرضها حقل النتيجة.

كيف تُكتب أمثلة من ورقة الأنماط بوحدة rem؟

كل سطر مكتوب بالبكسل كما يأتي من التصميم، وبجانبه القيمة نفسها بوحدة rem عند الأساس 16 بكسل وعند الأساس 10 بكسل في تقنية 62.5%.

السطر بالبكسل	بوحدة rem عند 16 بكسل	بوحدة rem عند 10 بكسل (62.5%)
font-size: 16px	1rem	1.6rem
font-size: 14px	0.875rem	1.4rem
font-size: 28px	1.75rem	2.8rem
padding: 12px 24px	0.75rem 1.5rem	1.2rem 2.4rem
margin-bottom: 32px	2rem	3.2rem
border-radius: 8px	0.5rem	0.8rem
max-width: 1200px	75rem	120rem
@media (min-width: 768px)	48rem	48rem

في الصف الأخير تبقى القيمة 48rem في العمودين. فوحدة rem داخل استعلام الوسائط تُحسب من القيمة الأولية لحجم الخط، والقاعدة المكتوبة على عنصر html لا تصل إليها[3]. قسنا ذلك في Chrome وFirefox على صفحة فيها تقنية 62.5%: القاعدة @media (min-width: 48rem) بدأت تعمل عند عرض 768 بكسل. وحين رفعنا حجم الخط في المتصفح إلى 20 بكسل، بدأت تعمل عند عرض 960 بكسل.

أي صيغ الكتابة يقبلها محوّل البكسل إلى rem ويحسبها؟

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

ما تكتبه أو تلصقه	ما يحسبه المحوّل	ما يحدث بهذه الصيغة
الحقل الأول: المقاس بالبكسل، والأساس 16 بكسل
24	1.5 rem	رقم وحده، كما يظهر المقاس في لوحة القياس في برنامج التصميم.
24px	1.5 rem	المقاس مع الوحدة ملاصقة له: نقرأ الرقم ونترك px.
24 بكسل	1.5 rem	الوحدة مكتوبة بالعربية بعد مسافة: نأخذ الرقم ونترك الكلمة.
٢٤	1.5 rem	أرقام مشرقية: نحوّلها إلى 24.
13.5	0.8438 rem	مقاس بكسر عشري: النتيجة تظهر بأربع خانات عشرية بعد التقريب.
1,200	75 rem	الفاصلة التي تليها ثلاثة أرقام بالضبط نقرؤها فاصل آلاف، فالمقاس ألف ومئتا بكسل. ويظهر تحت الحقل تلميح بالقراءة الأخرى الممكنة، 1.2.
١٬٢٠٠	75 rem	فاصل الآلاف العربي «٬» مع الأرقام المشرقية: المقاس نفسه، ألف ومئتا بكسل.
1.200	0.075 rem	النقطة نقرؤها في هذه الصفحة فاصلة عشرية حتى لو تلتها ثلاثة أرقام، فنقرأ 1.2 بكسل، ويظهر تحت الحقل تلميح. للألف والمئتين اكتب 1200 أو 1,200.
padding: 20px;	1.25 rem	سطر كامل من ورقة الأنماط: نأخذ الرقم ونترك اسم الخاصية والفاصلة المنقوطة.
−8px	-0.5 rem	علامة الطرح الطباعية «−» قبل الرقم نقرؤها إشارة سالبة، كما في الهامش السالب.
حقل «حجم الخط الأساسي (font-size)»: ما يحسبه المحوّل هو الأساس
62.5%	10 px	النسبة كما تكتبها على عنصر html: 62.5% من الأساس الافتراضي 16 بكسل تساوي 10.
font-size: 18px	18 px	سطر منسوخ من ورقة الأنماط: نأخذ الرقم 18 أساسًا.
١٦	16 px	الأساس بالأرقام المشرقية.

جرّبنا كل صيغة في الحقل نفسه قبل كتابتها هنا. وإذا ظهر تحت الحقل طلب بإدخال رقم واحد، فأبقِ في الحقل المقاس وحده.

كيف أحوّل مقاسات Figma وورقة أنماط كاملة من px إلى rem؟

المحوّل يكفي لعدة مقاسات. وحين تكون المقاسات كثيرة، تستطيع أدوات التصميم والبناء أن تحسب rem بنفسها.

مقاس من ملف تصميم
انسخ المقاس بالبكسل من لوحة القياس، والصقه في الحقل الأول. وإذا كانت الصفحة تضبط حجم خط لعنصر html، فاكتبه في حقل الحجم الأساسي قبل أن تنسخ النتيجة.
وضع Dev Mode في Figma
في الخطط المدفوعة يعرض Dev Mode المقاسات بوحدة rem مباشرة، والأسماء هنا بالإنجليزية كما تظهر في واجهة Figma. في قسم Code من لوحة Inspect اضغط Inspect settings بجانب قائمة اللغة واختر الوحدة rem. ولتغيير الأساس اختر من المكان نفسه Set unit scale…، واكتب الأساس في نافذة Unit scale.
دالة في Sass
في Sass تُقسم الأرقام بالدالة math.div() من مكتبة sass:math[4]. فالدالة @function rem($px) { @return math.div($px, 16px) * 1rem; } تجعل rem(24px) تساوي 1.5rem.
PostCSS لورقة أنماط كاملة
الإضافة postcss-pxtorem تحوّل px إلى rem في ملفات CSS عند البناء[5]. أساسها الافتراضي 16، وفي إعدادها الافتراضي تحوّل خصائص الخط فقط: font وfont-size وline-height وletter-spacing، وتترك استعلامات الوسائط بالبكسل.

تحويل بكسل إلى وحدات أخرى

px إلى pt px إلى سم px إلى مم px إلى إنش px إلى متر

المصادر

CSS Values and Units Module Level 4 — W3C
الخاصية font-size — موسوعة حسوب
Media Queries Level 4 — W3C
sass:math — Sass
postcss-pxtorem — GitHub
مبادئ النفاذ إلى محتوى الويب 2.1 — W3C، ترجمة مركز مدى

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

آخر مراجعة للمحتوى: 23 سبتمبر 2026 · كتبه وراجعه فريق Arteon

أسئلة شائعة عن تحويل البكسل إلى rem

كم rem في 16 بكسل؟

16 بكسل تساوي 1 rem عند الأساس الافتراضي 16 بكسل. ومع تقنية 62.5%، أي عند الأساس 10 بكسل، تساوي 1.6 rem.

كم rem في 14 بكسل و12 بكسل؟

14 بكسل تساوي 0.875 rem عند الأساس 16 بكسل، و12 بكسل تساوي 0.75 rem.

هل 24 بكسل تساوي 1.5 rem دائمًا؟

تساويها عند الأساس 16 بكسل فقط. فإذا كتبت الصفحة لعنصر html حجمًا آخر، فاقسم عليه: عند الأساس 10 بكسل تساوي 2.4 rem، وعند الأساس 20 بكسل تساوي 1.2 rem.

لماذا أقسم على 16؟

لأن حجم الخط الافتراضي في المتصفح يكون عادةً 16 بكسل، وهو الحجم المستعمل حين لا تضبط الصفحة حجمًا آخر[2]. وفي قياسنا كان هذا هو الحجم في Chrome وEdge وFirefox قبل أي تغيير في الإعدادات.

هل تغيّر تقنية 62.5% قيم rem في استعلامات الوسائط؟

لا تغيّرها. فالقاعدة @media (min-width: 48rem) تبدأ عند 768 بكسل مع التقنية ومن غيرها، لأن rem في استعلام الوسائط تُحسب من القيمة الأولية لحجم الخط[3]. لذلك حوّل حدود استعلامات الوسائط بالقسمة على 16.

ما الفرق بين تحويل البكسل إلى rem وتحويله إلى em؟

قيمة rem تُحسب من حجم خط عنصر html، فتقسم على الأساس نفسه في كل الصفحة. وقيمة em تُحسب من حجم خط العنصر الأب، فتقسم على حجم خط الأب. ولهذا الحساب محوّل البكسل إلى em.

هل أكتب سمك الحدود 1px بوحدة rem؟

إذا أردت أن يبقى الحد بسمك بكسل واحد عند كل إعداد، فاتركه 1px. وإذا كتبته 0.0625rem، صار سمكه 1.25 بكسل عند القارئ الذي اختار الأساس 20. والإضافة postcss-pxtorem تترك خاصية border بالبكسل في إعدادها الافتراضي[5].

هل يكبر النص المكتوب بوحدة rem مع إعداد القارئ؟

نعم، فالنص المكتوب بوحدة rem يكبر مع حجم الخط الذي يختاره القارئ في متصفحه، والنص المكتوب بالبكسل يبقى على مقاسه. ويتناول المعيار 1.4.4 «تغيير حجم النص» في مبادئ النفاذ إلى محتوى الويب هذه الحالة: أن يكبر النص إلى 200% دون خسارة المحتوى أو الوظيفة[6].

لقطة شاشة لأداة مجانية من Arteon: محوّل البكسل (px) إلى rem

ساعدنا في تحسين الأدوات

وجدت مقاسًا يعطي في متصفحك قيمة أخرى، أو لديك فكرة تحسّن المحوّل؟ اكتب لنا.