حجم الخط الأساسي (px)
قيمة الإدخال
مخرجات CSS
محول PX إلى REM
قيم البكسل ثابتة، لكن CSS الحديث يعتمد بشكل متزايد على REM للطباعة والتباعد ورموز التصميم. تحويل px إلى rem يدويًا يعني القسمة على حجم الخط الجذر في كل مرة. يصبح هذا مملًا وعرضة للأخطاء بسرعة عبر ورقة أنماط كبيرة. تصاميم Figma تصل دائمًا تقريبًا بوحدة البكسل، تاركةً للمطورين مهمة ترجمة كل قيمة قبل نشرها.
يتعامل هذا المحول مع الاتجاهين فورًا، دون إعادة تحميل الصفحة ودون معادلات يدوية. أدخل قيمة بالبكسل للحصول على مكافئها بوحدة rem، أو حوّل من rem إلى px بنقرة واحدة. يمكنك أيضًا ضبط حجم خط أساسي مخصص بدلاً من الاعتماد على القيمة الافتراضية 16px. يتم تنفيذ كل عملية حساب من جانب العميل داخل متصفحك، لذا لا تُرسل أي قيمة تُدخلها إلى أي خادم أبدًا.
مرجع سريع: قيم PX وREM (أساس 16px)
بكسل (px) | REM (أساس 16px) |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 3px | 0.1875rem |
| 4px | 0.25rem |
| 5px | 0.3125rem |
| 6px | 0.375rem |
| 7px | 0.4375rem |
| 8px | 0.5rem |
| 9px | 0.5625rem |
| 10px | 0.625rem |
فهم PX و REM
في تطوير الويب، البكسل (px) هي وحدات ثابتة الحجم، مما يعني أنها لا تتغير مع إعدادات حجم الخط للمستخدم. REM (Root EM) هي وحدة نسبية، حيث 1 REM يساوي حجم خط عنصر HTML الجذر (عادةً علامة html). هذا يجعل وحدات REM مثالية لإنشاء تصميمات متجاوبة تتكيف مع تفضيلات المستخدم وأحجام الشاشات المختلفة.
يعد التحويل بين REM و Pixels مهمة شائعة لمطوري الواجهة الأمامية لضمان الاتساق والاستجابة عبر مشاريعهم. ينطبق نفس منطق الضرب أو القسمة على تحويلات يومية أخرى، مثل محول الوزن للوصفات أو حسابات الشحن.
لماذا تستخدم REM بدلاً من Pixels في التصميم المتجاوب؟
- إمكانية الوصول: تحترم وحدات REM إعدادات حجم خط متصفح المستخدم، مما يسمح للمستخدمين الذين يعانون من ضعف بصري بتكبير النص أو تصغيره حسب الحاجة.
- الاستجابة: من خلال تعيين حجم خط أساسي على عنصر html، يمكنك بسهولة قياس جميع القياسات المستندة إلى REM عبر موقع الويب الخاص بك بالكامل عن طريق تغيير قيمة واحدة.
- إمكانية الصيانة: أسهل لإدارة الطباعة والتباعد عبر المشاريع الكبيرة.
كيف يعمل تحويل PX إلى REM
يستخدم تحويل قيمة بالبكسل إلى rem معادلة واحدة: القسمة على حجم الخط الأساسي بالبكسل. أما الاتجاه العكسي، من rem إلى px، فيضرب قيمة rem في حجم الخط الأساسي نفسه. تستخدم معظم المتصفحات 16px كحجم خط أساسي افتراضي ما لم تُغيّره الصفحة.
يتيح لك حقل حجم الخط الأساسي في هذه الأداة تجاوز القيمة الافتراضية 16px قبل التحويل. غيّره ليطابق حجم الخط الجذر لمشروعك، وستُعاد حساب كل نتيجة فورًا. إذا كنت بحاجة إلى المكافئ بالبكسل لارتفاع سطر محدد بوحدة REM، جرّب حاسبة ارتفاع السطر.
أمثلة عملية على تحويل PX إلى REM
تغطي هذه الأمثلة الخمسة التحويلات الأكثر شيوعًا، من تطابق مثالي 1:1 إلى حيلة حجم الخط الأساسي بنسبة 62.5%. يوضح كل صف المعادلة والنتيجة وما يجب فعله بها.
يؤدي ضبط html {'{'} font-size: 62.5%; {'}'} إلى تقليص حجم الخط الجذر من القيمة الافتراضية للمتصفح 16px إلى 10px. وبما أن 62.5% من 16px تساوي 10px، يصبح كل 1rem مساويًا لـ 10px بدلاً من كسر غير مريح، وهو ما يوضحه مثال تحويل 24px إلى 2.4rem أعلاه.
النوع | الإدخال | حجم الخط الأساسي | الحساب | النتيجة | ماذا يعني ذلك |
|---|---|---|---|---|---|
| حالة بسيطة | 16px | 16px | 16 ÷ 16 | 1rem | تطابق مثالي 1:1 مع الأساس الافتراضي — دون أي حساب ذهني. |
| حالة معقدة/عشرية | 14px | 16px | 14 ÷ 16 | 0.875rem | مفيدة للنصوص الأصغر قليلًا، مثل التسميات الثانوية أو التعليقات التوضيحية. |
| حالة حدية | 1px | 16px | 1 ÷ 16 | 0.0625rem | شائعة في الحدود الرفيعة بعرض بكسل واحد، حيث يظل جزء من البكسل واضحًا. |
| حالة واقعية (تقنية 62.5%) | 24px | 10px* | 24 ÷ 10 | 2.4rem | مع تفعيل تقنية 62.5%، تتطابق 2.4rem تمامًا مع عنوان بحجم 24px. |
| مسار عكسي | 1.5rem | 16px | 1.5 × 16 | 24px | يؤكد أن عنوانًا بحجم 1.5rem يظهر بدقة عند 24px على أساس قياسي قدره 16px. |
استخدام نتيجة PX إلى REM في CSS
غالبًا ما تُحدد مواصفات التصميم من Figma أو Sketch أحجام الخطوط بالبكسل، لكن CSS الخاص بالإنتاج يجب أن يستخدم rem. خذ القيمة بالبكسل من ملف التصميم الخاص بك، حوّلها باستخدام الأداة أعلاه، ثم الصق قيمة rem في ورقة الأنماط الخاصة بك.
أدوات التباعد والطباعة والحجم في Tailwind CSS مبنية على rem افتراضيًا، بافتراض حجم خط جذر قياسي قدره 16px. إذا كان مشروعك يستخدم حجم خط جذر مختلفًا، فإن فئات Tailwind تتغير بحسب تلك القيمة في كل مكان باستثناء داخل نقاط توقف الاستعلامات الإعلامية.
/* مواصفة Figma: font-size: 24px; */
font-size: 1.5rem;الأمان والخصوصية
يعمل هذا المحول بالكامل من جانب العميل داخل متصفحك. لا يتم إرسال القيم التي تُدخلها أبدًا إلى أي خادم، لذا يبقى كل حساب خاصًا أثناء عملك.
التعامل مع الأخطاء والحالات الحدية
يتعامل هذا المحول مع بعض المدخلات بشكل مختلف عن رقم موجب بسيط. فهم هذه الحالات الحدية يساعدك على الوثوق بالنتيجة بدلاً من الشك فيها.
إذا كنت تحوّل بانتظام وحدات تقنية أخرى لها خصوصيات التقريب الخاصة بها، فإن محول البيانات يغطي البايت والكيلوبايت وأكثر.
الإدخال | السلوك |
|---|---|
| قيمة سالبة بالبكسل أو rem | تُحوَّل بشكل طبيعي باستخدام نفس المعادلة — صالحة لخصائص CSS مثل margin أو transform التي تقبل أرقامًا سالبة. |
| حجم خط أساسي يساوي صفرًا | غير صالح. القسمة على صفر لا تُعطي نتيجة محددة، لذا تتطلب الأداة حجم خط أساسي أكبر من صفر. |
| إدخال غير رقمي | يُتجاهل. تُمسح النتيجة إلى أن يتم إدخال رقم صالح. |
| كسور عشرية صغيرة جدًا أو متكررة | تُقرَّب إلى 4 خانات عشرية لـ rem و2 لـ px، ثم تُزال الأصفار الزائدة للحصول على قيمة جاهزة لـ CSS. |
مقارنة بين REM وPX وEM
يعتمد الاختيار بين rem وpx وem على ما إذا كانت القيمة يجب أن تحترم تفضيلات حجم الخط لدى المستخدم. إذا كنت بحاجة أيضًا إلى تحويل وحدات طول مطلقة مثل البوصة أو السنتيمتر، فإن محول الطول يتعامل مع تلك التحويلات بشكل منفصل.
يقارن الجدول أدناه كيفية تصرف كل وحدة عبر التكبير وإعدادات إمكانية الوصول وحالات الاستخدام الشائعة. هناك استثناء مهم للتصميم المتجاوب: تُحل وحدات rem داخل استعلام إعلامي CSS دائمًا بالنسبة لحجم الخط الافتراضي للمتصفح، متجاهلةً أي حجم خط جذر مخصص في الصفحة.
الجانب | REM | PX | EM |
|---|---|---|---|
| الاستجابة | يتغير مع حجم الخط الجذر | ثابت بغض النظر عن الإعدادات | يتغير مع حجم خط العنصر الأب ويتراكم عند التداخل |
| تكبير الصفحة الكاملة في المتصفح | يتغير مع الصفحة، مثل px وem | يتغير مع الصفحة، مثل rem وem | يتغير مع الصفحة، مثل rem وpx |
| إعداد إمكانية الوصول لحجم النص | يزيد أو يقل مع الإعداد | لا يتأثر — يبقى ثابتًا | يزيد أو يقل مع الإعداد |
| استعلامات CSS الإعلامية | يُحل بالنسبة للقيمة الافتراضية للمتصفح، متجاهلاً حجم الخط الجذر المخصص | لا يتأثر — بكسل حرفي دائمًا | يُحل بالنسبة لسياق العنصر الأب، متجاهلاً تغييرات الصفحة |
| حالة الاستخدام النموذجية | الطباعة والتباعد والتخطيط الذي يجب أن يحترم تفضيلات المستخدم | الحدود والأيقونات وأي عنصر يجب أن يبقى بحجم ثابت | التحجيم على مستوى المكوّن، مثل الشارات أو الأزرار المتداخلة |
الأسئلة الشائعة (FAQ)
أسئلة مكررة