ما هو الفرق بين PX و EM و REM؟ ولماذا يجب أن نستخدمه في التصميم؟

إن كنت تصمم للويب فأنت تستخدم على الأغلب وحدة البكسل Pixel واختصارها PX، في تحديد أحجام جميع العناصر التي تقوم بإضافتها في تصاميمك من أحجام صور لخطوط وحتى العناصر البسيطة، طبعا هذا ما تعلمناه منذ زمن، ولكن هل مازال هذا صحيح؟

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

وفي هذه المقال سوف اوضح هذه الأمور بشكل كامل ولماذا يجب علينا التوقف عن استخدام وحدة البكسل في التصاميم الخاصة بنا، ولكن دعنا نبدأ ببعض التوضيحات الاساسية:

ما هو البكسل Pixel؟

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

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

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

DPI هي اختصار لـ Dots Per Inch أي نقطة لكل إنش وتستخدم ضمن الطباعة، أما PPI فهي اختصار Pixel Per Inch وهي تصف نفس الفكرة ولكن تعني بكسل لكل إنش وتستخدم ضمن الشاشات، أي أن المصطلحين يصفان مدى دقة الطباعة أو الشاشة والماسحات الضوئية.

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

ولكن لماذا أتكلم عن هذه التفاصيل؟

دعني اسئلك سؤال، إن قمت بتحديد حجم عنصر ضمن تصميم على أنه بعرض وارتفاع 100 بكسل، هل تعتقد أنه سوف يظهر على كل الأجهزة بنفس الحجم تماماً بناءاً على ما أصبحت تعرف حالياً؟

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

مشكلة أخرى في التعامل مع البكسل

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

ويمكنك الوصول لهذه الميزة والتحكم بها في مستعرض كروم عبر القائمة الجانبية التي تظهر عند الضغط على أيقونة النقاط الثلاث في اليسار أو اليمين حسب لغة جهازك ثم عبر المسار Settings ثم Appearance ثم Font size.

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

ماذا يعني ذلك؟ حسناً كل عنصر ضمن صفحات الويب يمتلك أحجام محددة في ملف CSS الخاص به، هذا الحجم إن تم تعيينه بقيمة ثابتة عبر البكسل من قبل مطور الصفحات فهذا لن يسمح بتغيير حجم الخط ضمن الصفحات بناءاً على الإعدادات الافتراضية المحددة ضمن المستعرض.

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

 ما هو الفرق بين وحدة PX و REM

يعتبر REM عبارة عن وحدة نسبية أي أنها تختلف بناءاً على قيمة أخرى وهي تستمد قيمتها من القيمة الافتراضية للخط ضمن المستعرض التي شاهدناها منذ قليل، مثلاً لو كانت القيمة الافتراضية ضمن المستعرض 16 بكسل فإن 1 REM يساوي 16 بكسل، و 1.5 REM تساوي 24 بكسل وهكذا.

لذلك في حال قام المستخدم بتغيير القيمة الافتراضية ضمن المستعرض فإن قيمة REM لديه سوف تتغيير، وبناءاً على هذا فإن أي صفحة تمتلك عناصر محددة عبر وحدة REM سوف تتغير قيمتها مباشرة بناءاً على القيمة الجديدة، مثلاً لو كانت القيمة الافتراضية للخط تساوي 24 فإن 1.5 REM أصبحت تساوي 36 بكسل وهكذا.

 هذا هو الفرق بين وحدة PX و REM، فالبكسل عبارة عن وحدة تعبر عن قيمة مساحة لونية، أما REM هي وحدة نسبياً تعبر عن قيمة عدد البكسل المحددة لدى المستخدم.

أيضاً من باب التوضيح هناك وحدة أخرى وهي EM وهي تعبر أيضاً عن عدد البكسل ولكن بطريقة مختلفة، حيث تأخذ قيمتها من الوسم Body الرئيسي ضمن ملف HTML ولكن استخدامها يحتوي على تعقيد أكبر في موضوع حساب قيمة EM، لذلك لن أتطرق لها هنا في هذه المقالة كونها غير مستخدمة بشكل كبير.

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

طرق حل مشكلة REM مع تطبيقات التصميم

حسناً كما نعلم لا يوجد لدينا في تطبيقات التصميم مثل Figma و Adobe XD حالياً دعم للتعامل مع وحدة REM أي أننا مازلنا نتعامل مع البكسل ضمن تصاميم الويب، فكيف سيكون الحل؟

حسناً من تجربتي الشخصية هنا طريقتين لحل هذه المشكلة:

الطريقة الأولى: جدول القيم

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

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

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

الطريقة الثانية: استخدام تطبيق للتسليم

ضمن هذه الطريقة أيضاً سوف تستخدم القيم عبر البكسل ضمن تطبيق التصميم الذي تستخدمه، ولكن سوف تستخدم تطبيق آخر لتسليم التصاميم مثل تطبيق Zeplin المخصص لعملية تسليم التصاميم للمطورين.

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

وقد قمت بشرح مميزات تطبيق Zeplin ضمن فيديو سابق على قناتي بشكل كامل:

هذه الطريقة تعتبر أفضل بالنسبة للمشاريع الكبيرة أو الفرق التي تحتوي على عدد كبير من المصممين والمطورين، حيث سوف يتولى تطبيق التسليم عملية استبدال القيم بشكل مباشر.

الخلاصة

إن كنت تريد التصميم بطريقة تتبع الممارسات الأفضل فعليك الانتقال مباشرة لاستخدام وحدة REM ضمن تصاميمك، بهذه الطريقة سوف تضمن أن تظهر تصاميمك ضمن المستعرضات بطريقة أفضل تتناسب مع مختلف الشاشات بشكل صحيح.

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