محوّل بيكسل / REM / EM
حوّل بين وحدات CSS: px وrem وem فورًا. حدّد حجم خط أساسي مخصصًا واحصل على جدول مرجعي مفيد. محوّل CSS مجاني عبر الإنترنت.
| px | rem | em |
|---|---|---|
| 4px | 0.25rem | 0.25em |
| 8px | 0.5rem | 0.5em |
| 10px | 0.625rem | 0.625em |
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 18px | 1.125rem | 1.125em |
| 20px | 1.25rem | 1.25em |
| 24px | 1.5rem | 1.5em |
| 28px | 1.75rem | 1.75em |
| 32px | 2rem | 2em |
| 40px | 2.5rem | 2.5em |
| 48px | 3rem | 3em |
| 64px | 4rem | 4em |
الأسئلة الشائعة
ما الفرق بين px وrem وem؟
px (بيكسل) وحدات مطلقة — 1px يساوي دائمًا بيكسلًا فيزيائيًا واحدًا عند التحجيم 1x. rem (em الجذر) نسبي إلى حجم خط عنصر الجذر <html>، وعادةً ما يكون 16px افتراضيًا. em نسبي إلى حجم خط العنصر الأب، مما قد يتشعب ويتضاعف بشكل غير متوقع في العناصر المتداخلة.
لماذا يجب استخدام rem بدلًا من px لأحجام الخطوط؟
يتيح استخدام rem للمستخدمين تحجيم موقعك بالكامل عن طريق تغيير حجم الخط الافتراضي في متصفحهم. هذا يحسّن إمكانية الوصول لمستخدمي ضعاف البصر. يتجاهل px تفضيلات حجم خط المتصفح، بينما يحترمها rem وem.
ما حجم الخط الأساسي الذي يجب أن أستخدمه؟
حجم الخط الافتراضي للمتصفح هو 16px، وهو القاعدة الأكثر شيوعًا. يضبط بعض المطورين 62.5% (10px) على عنصر html لتسهيل الحسابات (1rem = 10px). ومع ذلك، قد يتجاوز ذلك تفضيلات المستخدم ويؤثر سلبًا على إمكانية الوصول. الممارسة الأفضل هي ترك حجم الخط الجذر عند القيمة الافتراضية للمتصفح والعمل بـ rem.