محول PX إلى REM
حول قيم البكسل إلى REM والعكس بشكل فوري. اضبط أي حجم خط أساسي، اعرض جدول تحويل كامل، وانسخ خصائص CSS المخصصة أو جدول نص عادي لورقة الأنماط الخاصة بك.
محول PX ↔ REM
أدخل قيمة في أي حقل — يتحدث كلاهما بشكل مباشر بناءً على حجم الخط الأساسي.
بكسل (px)
REM
CSS لحجم الخط الجذر
:root { font-size: 16px; }
القيم الشائعة عند الأساس 16px
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 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 |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 80px | 5rem |
| 96px | 6rem |
بيانات خاصتك تبقى في المتصفح الخاص بك — لا يتم إرسال أي بيانات إلى أي خادم.
ما هو REM ولماذا نستخدمه؟
REM (root em) هي وحدة CSS نسبية بالنسبة إلى حجم الخط للعنصر الجذر (<html>). لأنها تتغير مع تفضيل حجم الخط في المتصفح لدى المستخدم، يفضل REM على البكسل للطباعة والمسافات والتخطيط — فهو يجعل المواقع أكثر إمكانية الوصول وأسهل في الصيانة. قاعدة المتصفح الافتراضية هي 16px، لذا 1rem = 16px ما لم يتم تجاوزها.
خدعة 62.5٪
تعيين :root { font-size: 62.5%; } يجعل 1rem يساوي 10px (62.5٪ من 16px)، مما يسهل العمليات الحسابية العقلية — 1.6rem = 16px، 2.4rem = 24px، وهكذا. تتيح لك هذه الأداة إدخال أي أساس مخصص لمعاينة قيم rem للتخطيط الخاص بك بنظرة واحدة.
كيفية الاستخدام
- اضبط حجم الخط الأساسي (الافتراضي 16px، مما يطابق معظم المتصفحات).
- اكتب قيمة بكسل — يتم تحديث مكافئ REM على الفور.
- أو اكتب قيمة REM — يتم تحديث مكافئ البكسل على الفور.
- قم بالتمرير لأسفل لرؤية جدول التحويل للأحجام الشائعة.
- انسخ الجدول كخصائص CSS مخصصة أو نص عادي لمشروعك.
جميع التحويلات تعمل في متصفحك — لا شيء يتم إرساله إلى أي خادم.
الأسئلة الشائعة
- ما هو حجم الخط الافتراضي للمتصفح؟
- معظم المتصفحات تفترض 16px لحجم الخط الجذر، مما يعني 1rem = 16px. يمكن للمستخدمين تغيير هذا في إعدادات المتصفح الخاصة بهم من أجل إمكانية الوصول، وهذا بالضبط السبب في تفضيل rem على قيم px الثابتة.
- كيف أحول px إلى rem عقليًا؟
- اقسم قيمة البكسل على حجم الخط الأساسي. مع القاعدة الافتراضية 16px: 24px ÷ 16 = 1.5rem. إذا كنت تستخدم خدعة 62.5٪ (الأساس = 10px): 24px ÷ 10 = 2.4rem.
- هل يجب أن أستخدم rem أم em؟
- REM نسبي للعنصر الجذر ومتسق في جميع أنحاء المستند الخاص بك. EM نسبي للعنصر الأب الأقرب، والذي قد يتراكم بشكل غير متوقع. يفضل REM عمومًا لأحجام الخطوط والمسافات؛ EM يمكن أن يكون مفيدًا لتحديد الحجم بنطاق المكون.
- هل تتعامل هذه الأداة مع القيم غير الصحيحة؟
- نعم. يمكنك إدخال أرقام عشرية مثل 14.5px أو 0.875rem وسيتعامل المحول معها بدقة.