مقدمة

The key features of the modern web design are that it is flexible and responsive. To make sure that the websites are correctly displayed in the machine of any type, PX to EM Converter can be utilized to have the fixed pixel (px) value changed into a scalable EM values – And it makes no difference that you are changing fonts sizes, paddings or margins and moving pixels to EM that would imply that whatever you have created could be easily scaled to other screen resolutions on the whim of whoever was using it.

إنه موفر للوقت، فهو لا يوفر عليك الوقت فحسب، بل يقلل أيضًا من الأخطاء التي قد ترتكبها في الدليل، فضلًا عن أنه مناسب لـ CSS الخاص بك. لستَ مضطرًا لإجراء أيٍّ من هذه الحسابات بنفسك، فبعد كتابة قيمة البكسل، سيعرض لك التطبيق تلقائيًا قيمة رقم EM المطلوب بالنسبة لحجم الخط الأساسي الذي تفضل استخدامه (16 هو حجم الخط الأساسي الأكثر استخدامًا).

ما هي وحدات PX وEM في CSS؟

ما هو PX (بكسل)؟

تصميم الويب هو مقياس نسبي يُقاس بوحدة البكسل (بكسل). كما يُوفر الحجم المطلق للشاشة، أي زرًا واحدًا، وهو ١٠٠ بكسل في أي وقت، بغض النظر عن الجهاز المستخدم ودرجة التكبير/التصغير المستخدمة.

وحدات البكسل ليست دقيقة، ولكنها قابلة للتعديل. قيم البكسل الثابتة ستؤدي إلى عدم استقرار في تصميم الأجهزة المتعددة، مثل الهواتف الذكية والشاشات عالية الأداء، بالإضافة إلى انخفاض قابلية القراءة.

ما هي الوحدة النسبية (EM)؟

وحدة EM (em) هي وحدة CSS أخرى يمكن اعتبارها وحدة نسبية وتعديلها في حالة كان حجم الخط الخاص بالعنصر الأساسي أكبر (أو يتبع العنصر العنصر الأساسي).

على سبيل المثال:

حجم الخط المستخدم هو 16 بكسل،,

1م = 16 بكسل. 2م = 32بكسل 0.75م = 12بكسل

تُمكّنه النسبية الكهرومغناطيسية من أن يكون تصميمًا فعالًا يتميز بسرعة الاستجابة وسهولة الاستخدام. تُبرمج وحدات الكهرومغناطيسية لتكبير المتصفح أو المستخدم الذي يهتم أكثر بالخطوط الكبيرة، مما يوفر للمستخدمين نفس درجة الوضوح والتصميم.

لماذا نستخدم EM بدلاً من PX؟

• EM يحل محل PX: لقد بعت ما أردت:
• شخصي: إنه ليس معزولًا عن العروض والمعدات الأخرى.
• قابلة للقراءة: أكثر قابلية للقراءة بالنسبة للمستخدمين من حيث الخط.
• حجم: العضويات ثابتة.
• قابلة للتخصيص: مثالي على الأطر الموجودة مسبقًا Tailwind أو Bootstrap أو CSS Grid.

وهذا يعني أن قيم EM ستخبرك الآن بما كنت تصنعه وتصممه، وما هو مناسب للاستخدام، وما هو تكوين بكسل الإصلاح غير الملائم في مناسبة معينة.

صيغة تحويل PX إلى EM

أبسط معادلة سيتم استخدامها في فك تشفير البكسلات إلى EM هي:

em = بكسل / حجم الخط الأساسي

ال الخط القياسي من أغلب متصفحات الويب هو 16 بكسل.

مثال:

32 بكسل إلى EM (استخدم خطًا أساسيًا بحجم 16):

32 ÷ 16 = 2em

لذا، 32 بكسل يساوي 2em.

سيتم دمج PX في أداة EM Converter

كما أنه ليس سهل الاستخدام أثناء عملية التحويل في حالة نمو ملفات CSS إلى أبعاد ضخمة. محول PX إلى EM يمكن القيام بذلك في تولز ميت أونلاين ويتم ذلك أيضًا مع القليل جدًا من المتاعب بالطريقة التالية:

• قم بتفعيل أداة تحويل PX إلى EM على الموقع.
• يجب أن يكون عدد البكسلات اللازمة عند الإدخال اختياريًا (على سبيل المثال 24 بكسل) ما لم ينص على خلاف ذلك.
• اختر أو اختر حجم الخط الافتراضي=16 بكسل.
• حدد تعديل على الأداة أو اتركها ببساطة.
• أدخل النتيجة التي تريدها (EM) في كود CSS الخاص بك.

مثال على التحويل

مدخل: 24 بيكسل

حجم الخط الأساسي: 16 بيكسل

نتيجة:

24 ÷ 16 = 1.5em

الإخراج: 1.5em

هذا كل شيء! سريع، بسيط، ودقيق.

فوائد الاستعانة بمصادر خارجية لتحويل PX إلى EM.

1. يوفر الوقت والجهد

يُعد تعديل هذا العدد الكبير من قيم البكسل عمليةً شاقة. فهو إحدى الأدوات المستخدمة في إنتاج الحسابات فورًا، وبالتالي لا يتطلب الأمر التفكير في الحسابات، بل التركيز على التصميم.

2. يتجنب الأخطاء الحسابية.

التحويل، مهما كان شكله، حتى لو كان يدويًا، غالبًا ما يكون عرضة للخطأ البشري. أنظمة الكمبيوتر مضمونة تمامًا.

3. رائع لمشاريع CSS الكبيرة

توجد أوراق أنماط ضخمة بانتظام. لا يوجد فرق في حجم عمل المُحوِّل، سواءً في المسافات أو الكتابة أو غير ذلك.

4. أحجام الخطوط الأساسية المخصصة.

يُنشأ تصميمه أو علاماته التجارية بناءً على حجم الخط الأساسي غير ١٦ بكسل (مثل ١٨ أو ٢٠ بكسل). يُتيح المُحوّل ضبط حجم الخط الأساسي وفقًا لإعدادات المشروع.

5. يعزز الاستجابة.

من السهل جدًا إنشاء تخطيطات سلسة، وبشكل عام، من السهل جدًا مراعاة إمكانية وصول المستخدمين إلى البضائع نظرًا لأنه يتم استخدام وحدات EM فقط وليس وحدات البكسل.

حالات الاستخدام في العالم الحقيقي

1. الطباعة المستجيبة

إنه نص ذو حجم ديناميكي وبالتالي يمكن أن يكون حجم الخط في EM.

مثال:

الجسم { حجم الخط: 16 بكسل؛ } h1 { حجم الخط: 2em؛ /* يساوي 32 بكسل */ } p { حجم الخط: 1em؛ /* يساوي 16 بكسل */ }

يتم تلقائيًا التقليل من أهمية جميع الأشياء التي تلامس تغيير الخط إلى حجم 18 بكسل في حالة حدوث مثل هذه الخطوة.

2. تخطيطات قابلة للتطوير

يستخدم المصممون تقنية EM لجعل الحشوات وارتفاع الخطوط والهوامش متجاوبة. هذا يضمن راحة تامة بين مسافات الشاشات.

3. تصميم يركز على الجوال أولاً

تم تصنيع وحدات EM المتنقلة الأولى بطريقة لا تؤدي فيها الوحدات الصغيرة إلى تعطيل التصميم.

جدول تحويل PX إلى EM (حجم الخط الأساسي = 16 بكسل)