محول CSS px ↔ rem
تحويل بين وحدات CSS px و rem.
محول وحدات CSS
تحويل البكسل (px) إلى وحدات rem.
شرح وحدات CSS
px (بكسل)
وحدة مطلقة تمثل بكسل واحد على الشاشة. لها حجم ثابت ومحدودة للتصميم المتجاوب.
rem (جذر EM)
وحدة نسبية تعتمد على حجم الخط للعنصر الجذر (html). مفيدة لإمكانية الوصول والتصميم المتجاوب.
صيغة التحويل
px → rem: px ÷ حجم الخط الأساسي
rem → px: rem × حجم الخط الأساسي
توصيات الاستخدام
- • حجم الخط: يوصى بـ rem
- • المسافات (margin, padding): يوصى بـ rem
- • الحدود: يمكن استخدام px
- • استعلامات الوسائط: يوصى بـ rem
قيم التحويل الشائعة
px
rem
8px
0.5rem
12px
0.75rem
14px
0.875rem
16px
1rem
18px
1.125rem
20px
1.25rem
24px
1.5rem
32px
2rem
دليل وحدات CSS الكامل
يؤثر اختيار وحدات CSS الصحيحة في تطوير الويب بشكل كبير على تجربة المستخدم وإمكانية الوصول. تعرف على الاختلافات بين px و rem وكيفية استخدامها في المواقف المناسبة.
دليل متعمق لوحدة البكسل (px)
📐 الميزات
- • وحدة مطلقة تتوافق 1:1 مع بكسلات الشاشة
- • حجم ثابت عبر جميع المتصفحات
- • تحكم دقيق في التخطيط ممكن
- • لا تتأثر بإعدادات المستخدم
✅ حالات الاستخدام الموصى بها
- • سمك الحدود (1 بكسل، 2 بكسل)
- • إزاحة الظل
- • أحجام الأيقونات (16 بكسل، 24 بكسل)
- • تعديلات المسافات الدقيقة
⚠️ تحذيرات
- • تتجاهل إعدادات حجم الخط للمستخدم
- • قد تسبب مشاكل في إمكانية الوصول
- • محدودة للتصميم المتجاوب
دليل متعمق لوحدة rem
📐 الميزات
- • تعتمد على حجم الخط للعنصر الجذر (html)
- • تعكس إعدادات المستخدم
- • تحافظ على نسب متناسقة
- • صديقة لإمكانية الوصول
✅ حالات الاستخدام الموصى بها
- • إعدادات حجم الخط
- • المسافات (margin, padding)
- • أحجام الحاويات
- • نقاط توقف استعلامات الوسائط
💡 المزايا
- • تحافظ على النسب عند التحجيم
- • تحسن إمكانية الوصول
- • سهولة الصيانة
دليل التطبيق العملي
🎯 استراتيجية الاستخدام الخاصة بالوحدة
الطباعة
استخدم rem لأحجام الخطوط وتباعد الأسطر rem
التخطيط
استخدم rem للمسافات والحاويات rem
التفاصيل
استخدم px للحدود والظلال px
📱 نصائح التصميم المتجاوب
نهج الجوال أولاً
اضبط حجم الخط الأساسي على 16 بكسل وقم بالتحجيم باستخدام وحدات rem
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }استخدام استعلامات الوسائط
حافظ على الاتساق مع نقاط توقف تعتمد على rem
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ اعتبارات إمكانية الوصول
✅ الممارسات الموصى بها
- • اضبط أحجام الخطوط باستخدام وحدات rem
- • حافظ على حجم خط أدنى يبلغ 16 بكسل
- • تباعد أسطر كافٍ (1.5 أو أكثر)
- • الحد الأدنى لمنطقة اللمس 44 بكسل
❌ أشياء يجب تجنبها
- • استخدام قيم px ثابتة لأحجام الخطوط
- • نص صغير أقل من 12 بكسل
- • عروض حاوية ثابتة
- • تباعد أسطر 1.0 أو أقل
🔧 دعم المتصفح والتوافق
وحدة px
دعم مثالي في جميع المتصفحات. متاح من IE6+.
وحدة rem
دعم مثالي في IE9+ والمتصفحات الحديثة. يلزم وجود بديل لـ IE8 وما دونه.
لدعم IE8: صرح بقيمة px أولاً، ثم أضف قيمة rem كبديل
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */