محوّل PX إلى REM
جديدحوّل بين px وrem وem وpt بالنسبة إلى حجم الخط الجذري.
Browsers default to a 16px root. The 10px preset is the popular 62.5% trick, where 1rem maps to 10px.
| px | rem | copy |
|---|
Runs entirely in your browser. Nothing is uploaded.
تحويل px إلى rem والعكس بشكل فوري
يُزامن هذا المحوّل من px إلى rem قيم px و rem و em و pt تلقائياً مع أي حجم خط جذر تختاره. عدّل أي حقل وستتحدث باقي القيم في الحال، مما يُتيح الانتقال من تصميم مكسور بالبكسل إلى وحدات rem قابلة للتوسع — أو العودة من rem إلى px — دون أي حسابات ذهنية. إنه محوّل وحدات CSS سريع ومجاني يعمل كلياً داخل متصفحك دون رفع أي بيانات.
يُدرج الجدول المرجعي أسفل المحوّل كل قيم px الشائعة التي تحتاجها يومياً — انسخ أي نتيجة بنقرة واحدة. غيّر حجم الخط الجذر ويُعيد الجدول كلياً الحساب فوراً، مما يُسهّل التبديل بين مشروع يستخدم جذراً بـ 16px وآخر يستخدم 10px (حيلة الـ 62.5%).
شرح معادلة تحويل px إلى rem
المعادلة بسيطة: rem = px ÷ حجم الخط الجذر. تعتمد المتصفحات افتراضياً جذراً بـ 16px، إذن 16px = 1rem، و24px = 1.5rem، و40px = 2.5rem. للعكس: px = rem × الجذر، فـ 0.875rem × 16 = 14px. ولأن المحوّل ثنائي الاتجاه، لا حاجة لتذكّر أي الاتجاهين تسلك — فقط اكتب في الحقل الذي تعرفه وستتحدث البقية.
تُسهّل حيلة الـ 62.5% الأمر أكثر: اضبط html { font-size: 62.5%; } لجعل الجذر 10px، فتصبح قيم rem مضاعفات نظيفة للعشرة. 1.6rem = 16px، و2.4rem = 24px، و3.2rem = 32px. انتقل إلى الإعداد المسبق 10px هنا لترى التطابق الواضح عبر كل القيم الشائعة.
px وrem وem — ما الفرق؟
px وحدة مطلقة: 16px تبقى 16px دائماً. rem نسبية إلى حجم خط العنصر الجذر (html)، مما يمنح مرجعاً موحداً للصفحة كلها. em نسبية إلى حجم خط العنصر الأب، فتتضاعف عند التداخل — فقرة داخل قسم بـ 1.2em داخل مقالة بـ 1.2em تُعطي 1.2 × 1.2 = 1.44em، بينما 1.44rem ستكون 1.44 × الجذر فقط بغض النظر عن عمق التداخل.
يعرض الأداة أيضاً pt (1px = 0.75pt) للقيم ذات طابع الطباعة. مع جذر 16px وبدون تداخل، تكون 16px و1rem و1em متساوية تماماً — يظهر الفرق فقط عند تغيير أحجام خطوط الآباء أو عندما يعدّل المستخدم حجم النص الافتراضي في متصفحه.
لماذا تستخدم rem لأحجام الخطوط — إمكانية الوصول مهمة
ضبط الخطوط بـ rem بدلاً من px تحسين حقيقي لإمكانية الوصول. حين يرفع الزائر حجم النص الافتراضي في متصفحه — وهي حاجة شائعة لذوي الإعاقات البصرية أو من يقرؤون على شاشات عالية الكثافة — يتناسب كل حجم خط ومسافة معتمدَين على rem معه تلقائياً. قيم px تبقى ثابتة وقد تُنتج تخطيطات يصبح فيها النص صغيراً جداً نسبةً لحاويته.
يشترط معيار WCAG 2.1 الإرشاد 1.4.4 إمكانية تكبير النص حتى 200% دون فقدان المحتوى أو الوظيفة. البناء بـ rem من البداية يُيسّر تحقيق هذا المعيار — يتحرك نظام الطباعة كاملاً والكثير من التباعد حين يتغير الجذر، محافظاً على التناسب. لهذا تعتمد أدوات كـ Tailwind CSS على rem بشكل افتراضي في كل مكان.
قيم px إلى rem الشائعة — مرجع سريع
مع الجذر القياسي 16px: 8px = 0.5rem، 10px = 0.625rem، 12px = 0.75rem، 13px = 0.8125rem، 14px = 0.875rem، 16px = 1rem، 18px = 1.125rem، 20px = 1.25rem، 24px = 1.5rem، 28px = 1.75rem، 32px = 2rem، 36px = 2.25rem، 40px = 2.5rem، 48px = 3rem، 64px = 4rem.
هذه القيم هي الأكثر استخداماً في أي قاعدة كود CSS. يُدرج الجدول المرجعي في الأداة كل هذه القيم ويتيح نسخ أي منها بنقرة واحدة — أسرع من الحساب اليدوي في كل مرة وأقل عرضة للخطأ من حفظ الجدول. احفظ هذه حاسبة rem في المفضلة وافتحها كلما احتجت لترجمة مواصفات تصميم Figma بالبكسل إلى CSS بـ rem.
خاص وفوري ومجاني — بدون تسجيل
لا شيء يُثبَّت ولا حساب يُنشأ. كل تحويل — px إلى rem، rem إلى px، px إلى em، em إلى px — يتم محلياً في متصفحك بـ JavaScript. القيم التي تُدخلها لا تغادر جهازك وتبقى طيّ الكتمان. خلافاً لبعض المحوّلات الإلكترونية التي تشترط إنشاء حساب أو مشاهدة إعلانات قبل الوصول للنتائج، كل شيء هنا متاح فوراً وبلا قيود.
تعمل الأداة بدون إنترنت بعد تحميلها، وليس لها حدود استخدام، وتعمل على أي جهاز — سطح مكتب، أو لوحي، أو iPhone، أو Android. احفظ هذا المحوّل من px إلى rem كأداة CSS يومية ووفّر على نفسك الحسابات الذهنية في كل مرة تترجم مواصفات تصميم إلى CSS قابل للتوسع.
Frequently asked questions
كيف أحوّل px إلى rem؟
اقسم قيمة البكسل على حجم الخط الجذر: rem = px ÷ الجذر. مع الجذر الافتراضي 16px: 16px ÷ 16 = 1rem، و24px ÷ 16 = 1.5rem، و40px ÷ 16 = 2.5rem. اكتب أي قيمة px في المحوّل أعلاه وسيتحدث حقل rem فوراً — دون أي حساب ذهني. لحيلة الـ 62.5% (جذر 10px)، اقسم على 10 فحسب: 24px = 2.4rem.
كيف أحوّل rem إلى px؟
اضرب قيمة rem في حجم الخط الجذر: px = rem × الجذر. مع الجذر الافتراضي 16px: 1rem × 16 = 16px، و1.5rem × 16 = 24px، و0.875rem × 16 = 14px. عدّل حقل rem في المحوّل وسيتبعه حقل px فوراً. المحوّل ثنائي الاتجاه بالكامل — أدخل القيمة التي تعرفها والأخرى تتحدث تلقائياً.
كم يساوي 1rem بالبكسل؟
1rem يساوي حجم خط الجذر (html). في كل المتصفحات الرئيسية — Chrome وSafari وFirefox وEdge — يكون الافتراضي 16px، إذن 1rem = 16px ما لم يُغيَّر الجذر. إن ضبطته على 10px (حيلة الـ 62.5%)، يصبح 1rem = 10px. يمكن للمستخدمين أيضاً تغيير حجم النص الافتراضي في إعدادات المتصفح، مما يُغيّر ما يساويه 1rem لديهم — ولهذا rem أفضل من px لأحجام الخطوط المتاحة.
كم يساوي 0.875rem بالبكسل؟
0.875rem يساوي 14px مع الجذر القياسي 16px (0.875 × 16 = 14). هذه من أكثر قيم rem شيوعاً في أطر CSS — فئة text-sm في Tailwind CSS هي 0.875rem (14px). مع جذر 10px (حيلة الـ 62.5%)، سيساوي 0.875rem قيمةً 8.75px.
ما الفرق بين rem وpx؟
px وحدة مطلقة وثابتة — 16px تبقى 16 بكسلاً بصرف النظر عن إعدادات المستخدم أو حجم الشاشة. rem نسبية: إنها مضاعف حجم خط العنصر الجذر (html)، فـ 1rem = 16px افتراضياً لكنها تكبر إن رفع المستخدم حجم نصه الأساسي في إعدادات إمكانية الوصول. هذا يجعل التخطيطات المعتمدة على rem أكثر سهولة للوصول — ينمو النص تناسبياً حين يطلب المستخدم نصاً أكبر، بينما يبقى النص المحدد بـ px محجوزاً وقد يصبح صغيراً جداً.
ما الفرق بين px وrem وem؟
px ثابت. rem نسبي إلى حجم خط الجذر (html) — مرجع واحد ثابت للصفحة كلها. em نسبي إلى حجم خط العنصر الأب المباشر، فيتضاعف عند التداخل: أب بـ 20px وابن بـ 1.5em يعطي 30px للابن. اضبط الابن ذاته على 1.5rem وسيكون 24px (1.5 × جذر 16px)، بغض النظر عن الأب. مع جذر 16px وبدون تداخل، تتساوى 16px و1rem و1em — يظهر الفرق فقط حين تتغير أحجام خطوط الآباء.
أيهما أفضل — rem أم px لأحجام الخطوط؟
rem أفضل لأحجام الخطوط من منظور إمكانية الوصول. حين يرفع شخص ما حجم نصه الافتراضي في المتصفح — وهي حاجة شائعة لذوي الإعاقات البصرية — يتناسب كل حجم خط يعتمد rem معه، بينما تبقى قيم px ثابتة. يشترط معيار WCAG 2.1 الإرشاد 1.4.4 (تكبير النص) إمكانية تكبير النص حتى 200% دون فقدان الوظيفة — استخدام rem يُحقق هذا بسهولة. استخدم px فقط لما لا يجب أن يتناسب، كحدود 1px أو أيقونات ذات حجم ثابت.
ما حيلة الـ 62.5% في CSS؟
تضبط حيلة الـ 62.5% حجم خط الجذر (html) على 62.5% — وهو ما يساوي 10px مع الافتراضي 16px للمتصفح. هذا يُسهّل حساب rem تسهيلاً شاملاً: 1.6rem = 16px، و2.4rem = 24px، و3.2rem = 32px. كل قيمة rem تُقابل مضاعفاً نظيفاً للعشرة. غيّر حجم الخط الجذر إلى 10px باستخدام الإعداد المسبق هنا وسيُعيد المحوّل والجدول المرجعي الحساب فوراً لترى التطابق الواضح. الجانب السلبي أنك تتجاوز الافتراضي في متصفح المستخدم، مما يُقلل قليلاً من إمكانية الوصول.
ما أحجام الخطوط الشائعة بـ rem مع الافتراضي 16px؟
مع الجذر القياسي 16px: 10px = 0.625rem، 12px = 0.75rem، 13px = 0.8125rem، 14px = 0.875rem، 16px = 1rem، 18px = 1.125rem، 20px = 1.25rem، 24px = 1.5rem، 28px = 1.75rem، 32px = 2rem، 40px = 2.5rem، 48px = 3rem. يُدرج الجدول المرجعي في الأداة كل القيم الشائعة ويتيح نسخ كل منها بنقرة واحدة — أسرع من الحساب اليدوي في كل مرة.
كيف تُطبَّق تحويلات px إلى rem في Tailwind CSS؟
يستخدم Tailwind CSS وحدات rem لمعظم قيم الحجم افتراضياً مع جذر 16px. مقياس التباعد في Tailwind: وحدة واحدة = 0.25rem = 4px. إذن space-4 = 1rem = 16px، وspace-6 = 1.5rem = 24px، وspace-8 = 2rem = 32px. للطباعة: text-sm = 0.875rem (14px)، وtext-base = 1rem (16px)، وtext-lg = 1.125rem (18px)، وtext-xl = 1.25rem (20px)، وtext-2xl = 1.5rem (24px). يتيح لك هذا المحوّل التحقق سريعاً من أي قيمة px مخصصة مقابل نظام rem في Tailwind.
هل يعمل هذا المحوّل بدون إنترنت؟
نعم، تماماً. يعمل المحوّل كلياً بـ JavaScript في متصفحك — لا تواصل مع خادم، ولا استدعاءات API، ولا بيانات مُرفَّعة. يعمل بدون إنترنت بعد تحميل الصفحة. القيم التي تكتبها لا تغادر جهازك أبداً. يمكنك حفظه في المفضلة واستخدامه في الطائرة أو النفق أو أينما كنت تبرمج بدون اتصال. لا شيء يُخزَّن على أي خادم.
كيف أُغيّر حجم الخط الأساسي في المحوّل؟
اكتب أي قيمة في حقل "حجم الخط الجذر" — أو استخدم أزرار الإعداد المسبق لـ 16px (الافتراضي للمتصفح) أو 10px (حيلة الـ 62.5%). يُعيد كل تحويل rem وem وpt في الجدول والإدخال النشط الحساب فوراً ليتوافق مع جذرك الجديد. إن ضبط CSS الخاص بك html { font-size: 18px; }، أدخل 18 كجذر وستكون كل التحويلات دقيقة لمقياس مشروعك المحدد.
Related tools
عرض كل الأدوات
جديد ترميز / فك ترميز كيانات HTML
رمّز كيانات HTML وفُكّ ترميزها، مع خيار الترميز الرقمي.
جديد منشئ تعبيرات Cron
اشرح جدول Cron بلغة بسيطة وعاين أوقات تشغيله القادمة.
جديد مصغّر HTML
اضغط شيفرة HTML بإزالة التعليقات وطيّ المسافات البيضاء.
جديد مصغّر CSS
قلّص حجم CSS بإزالة التعليقات والمسافات البيضاء غير الضرورية.
جديد ترميز / فك ترميز JSON
رمّز النص الخام إلى سلسلة آمنة لـ JSON وفُكّ ترميزها مجددًا.
جديد رموز حالة HTTP
مرجع قابل للبحث لرموز حالة HTTP بمعانٍ مبسّطة.