قد يبدو عنصرًا صَمَّمْتَهُ مناسبًا داخل التصميم: النص واضح، والمسافة حوله مريحة، وحجمه مُتَوَازِن مع بقية العناصر. لكن بعد تنفيذ الصفحة، يُكَبِّرُ المُسْتَخْدِمُ الخط فَتَضِيقُ المساحة داخل العنصر، أو يَمْتَدُّ العنوان إلى سطرين فَتَتَغَيَّرُ المسافات التي رَتَّبْتَهَا. لهذا لا يكفي أن نعرف الأرقام التي استخدمناها في ضَبْط المقاسات؛ نحتاج أيضًا إلى فهم الطريقة التي تَتَغَيَّرُ بها.
هنا تأتي أهمية وحدات القياس في CSS، فهي اللغة التي تُحَدِّدُ مظهر صفحات الويب. حيث الفرق الأساسي أن PX هي قيمة ثابتة لا تَتَغَيَّرُ، وREM تعتمد على حجم خط العنصر الجَذْرِيّ للصفحة، أما EM فترتبط بحجم خط العنصر أو أبيه بحسب الخاصية التي نُحَدِّدُها. هذا مُخْتَصَر الفروقات بشكل سريع وأنا أَعْلَمُ انه غير واضح لك الآن، لذلك في هذه المقال سَنَشْرَحُ هذه العلاقة خطوة بخطوة، ثم نربطها بقرارات المُصَمِّم أثناء العمل والتسليم.
طبعًا لَسْتَ بحاجة إلى تَعَلُّم البرمجة حتى تستفيد من الفكرة. ما يهمك هو أن تستطيع توضيح سلوك التصميم للمُطَوِّر، والأهم أن هذه المقاييس هامة إن كنت ترغب في بناء أنظمة تصميم Design System بطريقة صحيحة ومتماسكة.
ما هو البكسل؟ وهل PX تساوي نقطة على الشاشة؟
إذا كَبَّرْتَ صورة كثيرًا، سَتُلَاحِظُ مربعات صغيرة بألوان مختلفة. كل مربع منها هو بكسل، واجتماع هذه المربعات هو ما يُكَوِّنُ الصورة. هذا ما تُوَضِّحُه الصورة التالية.
لكن عندما نُحَدِّدُ قيمة px لحجم زِرّ أو نص في تصميم موقع، فنحن نَسْتَخْدِمُ وحدة قياس خاصة بصفحة الويب. هذه الوحدة لا تساوي دائمًا بكسلًا واحدًا من الشاشة؛ فقد يَسْتَخْدِمُ الجهاز عدة بكسلات لعرضها، بحسب دقة شاشته. تشرح وثائق MDN هذا الفرق.
ما الذي يعنيه هذا لك كمصمم؟ يعني أن عدد البكسلات في الصورة، والمقاس الذي تَعْرِضُ به الصورة داخل الصفحة، أمران مختلفان. يمكنك عرض صورتين مختلفتين في الدقة داخل المساحة نفسها، لكن إحداهما قد تبدو أوضح من الأخرى بسبب زيادة عدد البيكسلات ضمنها.
أما في النصوص، فكتابة font-size: 16px تعني «اجعل حجم الخط 16 بكسل». هنا اخترنا رقمًا مُحَدَّدًا، ولم نطلب حسابه من حجم خط آخر، أي أن الحجم هنا ثابت وليس مُتَغَيِّر بناءاً على عنصر آخر، وهذه هي النقطة المهمة يجب أن تُدْرِكَهَا.
كيف تعمل وحدة REM؟
تحتوي صفحة الويب على عنصر أساسي اسمه html، يَضُمُّ بقية أجزاء الصفحة. يُسَمَّى هذا «العنصر الجَذْرِيّ». ويمكن تحديد حجم خط له، حتى لو لم نكتب نصًا فيه مباشرة، بمفهوم لغة HTML يمكننا توريث هذه القيمة أي حجم الخط الذي حَدَّدْنَاهُ للعنصر html للعناصر التي تكون ضمنه، وهنا تعتمد REM على حجم خط هذا العنصر عند حساب المقاسات.
لِنُعْطِي مثال، لِنَفْرِضْ أن حجم خط html هو 16px. عندها تكون 1rem مساوية لـ 16 بكسل، و2rem مساوية لـ 32 بكسل، و 0.5rem مساوية لـ 8 بكسلات. الرقم قبل REM يُخْبِرُ المُتَصَفِّح كم مرة يَسْتَخْدِمُ حجم خط html في الحساب.
وإذا تَغَيَّرَ حجم خط html إلى 20px، تصبح القِيَم السابقة 20 و40 و10 بكسلات. لذلك نَصِفُ REM بأنها وحدة نسبية: قيمتها تَتَغَيَّرُ عندما يَتَغَيَّرُ الحجم الذي تعتمد عليه. يمكنك مراجعة تعريفها في مرجع وحدات الطول من MDN.
غالبًا يكون الحجم الافتراضي للخط في المُتَصَفِّح 16 بكسل، لكن المُسْتَخْدِم قد يختار حجمًا آخر. إذا ترك المُطَوِّرُ حجم خط html على الإعداد الافتراضي، فإن حساب REM يستفيد من هذا الاختيار. أما إذا ثَبَّتَهُ عند 16px، فلن تَتَغَيَّرَ قِيَم REM لمجرد تغيير إعداد الخط الافتراضي في المُتَصَفِّح.
تفيدنا هذه الوحدة عندما نُرِيدُ تطبيق أحجام مُتَنَاسِقَة في الصفحة. مثلًا، يمكن تحديد النص الأساسي بـ 1rem والعنوان بـ 2rem. إذا تَغَيَّرَ حجم خط html، يَتَغَيَّرُ الاثنان معًا، ويبقى حجم العنوان ضِعْف حجم النص.
كيف تختلف EM عن REM؟
لفهم EM، نحتاج أولًا إلى توضيح كلمة «عنصر». الزِّرّ عنصر، والفقرة عنصر، والبطاقة التي تحتوي على عنوان وَزِرّ عنصر أيضًا. وعندما يكون الزِّرّ داخل البطاقة مباشرة، نُسَمِّي البطاقة «العنصر الأب» لِلزِّرّ. أي أنها العنصر الذي يحتويه.
تعمل EM بطريقتين حسب ما نُرِيدُ قياسه. عند تحديد حجم الخط، تعتمد على حجم خط العنصر الأب. وعند تحديد المسافة الداخلية، تعتمد على حجم خط العنصر نفسه. والمسافة الداخلية، أو padding، هي الفراغ بين المحتوى وحدود العنصر؛ مثل الفراغ بين كلمة «اِحْجِزْ» وحواف الزِّرّ.
لِنَفْرِضْ أن حجم الخط في البطاقة هو 20 بكسل. إذا حَدَّدْنَا خط الزِّرّ داخلها بـ 1em، يصبح حجمه 20 بكسل أيضًا. وإذا اخترنا له 1.5em، يصبح 30 بكسل. أما إذا أعطينا الزِّرّ مسافة داخلية مقدارها 0.5em، فستساوي نصف حجم خط الزِّرّ: أي 15 بكسل في الحالة الثانية.
هنا يظهر الفرق عن REM: حساب EM يتأثر بمكان العنصر وحجم الخط فيه، بينما حساب REM يرجع إلى html. لهذا يمكن استخدام EM لجعل الفراغ حول النص يَكْبُرُ عندما يَكْبُرُ النص نفسه فقط لا كل العناصر في التصميم.
لكن يجب الانتباه عند وضع عناصر داخل بعضها. إذا كان الخط في بطاقة 16 بكسل، ثم حَدَّدْنَا خط عنصر داخلها بـ 2em، يصبح 32 بكسل. وإذا وضعنا داخله عنصرًا آخر وَحَدَّدْنَا خطه أيضًا بـ 2em، يصبح 64 بكسل. كل مرة نُضَاعِفُ حجم خط الأب، لا حجم خط الصفحة. تَعْرِضُ وثائق حجم الخط في MDN أمثلة على هذه الحالة.
متى نَسْتَخْدِمُ كل وحدة؟
لا تحتاج إلى اختيار وحدة واحدة واستخدامها في كل شيء. فَكِّرْ في الجزء الذي تعمل عليه: هل تريد حجمه أن يَتَغَيَّرَ مع خط الصفحة، أم مع النص الموجود داخله، أم أن يبقى مُسْتَقِلًّا عن أحجام الخطوط؟
يُلَخِّصُ الجدول أمثلة للاختيار، بناءً على طريقة حساب الوحدات في CSS.
جدول من 3 صفوف
الوحدة | كيف يُحْسَبُ المقاس؟ | مثال للاستخدام |
|---|---|---|
| بالرقم الذي نكتبه، دون الرجوع إلى حجم خط آخر | حَدّ حول زِرّ بِسُمْك |
| نَضْرِبُ الرقم في حجم خط | عنوان بحجم |
| نَضْرِبُ الرقم في حجم خط الأب عند تحديد الخط، أو خط العنصر عند تحديد المسافة الداخلية | فراغ داخل زِرّ يَكْبُرُ مع نصه |
قد يبدو الاختيار أسهل عندما نُطَبِّقُهُ على عنصر واحد. لذلك سَنَسْتَخْدِمُ الوحدات الثلاث في زِرّ، ونرى ماذا يحدث عند تغيير حجم الخط.
مثال: كيف يَكْبُرُ الزِّرّ مع النص؟
لِنُصَمِّمْ زِرًّا مكتوبًا عليه «اِحْجِزْ الآن»، ونفترض أن حجم خط html هو 16 بكسل. نَخْتَارُ حجم النص داخل الزِّرّ 1rem، فَيَظْهَرُ بحجم 16 بكسل.
نَتْرُكُ فوق النص وتحته مسافة 0.5em، أي 8 بكسلات، وعلى يمينه ويساره مسافة 1em، أي 16 بكسل. ثم نُضِيفُ خطًا حول الزِّرّ بِسُمْك 1px.
الآن، إذا أصبح حجم خط html هو 20 بكسل، فَسَيَكْبُرُ نص الزِّرّ إلى 20 بكسل. وتصبح المسافة فوقه وتحته 10 بكسلات، وعلى جانبيه 20 بكسل. أما الخط المحيط بِالزِّرّ فيبقى بِسُمْك 1px.
بهذا يَكْبُرُ الفراغ حول النص مع زيادة حجم النص، بدل أن يصبح الزِّرّ مُزْدَحِمًا. هذه المقاسات مثال للشرح؛ اِخْتَرْ المقاسات الفعلية بحسب تصميمك، ثم جَرِّبْها.
ويبقى ارتفاع الزِّرّ بحاجة إلى انتباه. إذا حَدَّدْتَهُ برقم صغير لا يسمح للنص بالتمدد، فقد يُقْطَعُ النص رغم استخدام REM وEM. في هذا المثال، نَتْرُكُ ارتفاع الزِّرّ يَتَّسِعُ للنص والمسافات حوله، ونراجع النتيجة بعد التنفيذ.
هل استخدام REM يجعل الموقع مناسبًا لكل الشاشات؟
استخدام REM وحده لا يكفي. عندما تَضِيقُ الشاشة، قد نحتاج إلى وضع بطاقتين تحت بعضهما بدل وضعهما جنبًا إلى جنب، أو السماح للعنوان بالظهور على سطرين. هذه تغييرات في ترتيب الصفحة، ولا تحدث تلقائيًا بسبب استخدام REM.
كذلك هناك فرق بين تغيير حجم الخط الافتراضي في إعدادات المُتَصَفِّح، وتكبير الصفحة باستخدام Zoom. تغيير الإعداد الافتراضي يؤثر في الأحجام التي تعتمد عليه. أما تكبير الصفحة فَيُكَبِّرُ عرض محتواها، حتى النصوص التي حُدِّدَ حجمها بوحدة PX.
المهم أن يبقى النص ظاهرًا وقابلًا للقراءة. يطلب معيار تغيير حجم النص من W3C إمكانية تكبير النص حتى 200% دون فقد المحتوى أو القدرة على استخدام وظائف الصفحة، مع الاستثناءات المذكورة في المعيار.
لذلك، عند الاختبار، لا تَكْتَفِ بملاحظة أن الحروف أصبحت أكبر. تَأَكَّدْ أن الكلمات لم تَخْتَفِ خلف عنصر آخر، وأن نص الزِّرّ يظهر كاملًا، وأنك ما زلت تستطيع استخدام الأزرار والحقول.
كيف تَسْتَخْدِمُ هذه المعلومات عند تسليم التصميم؟
يمكنك متابعة التصميم بالمقاسات التي تَعْرِضُهَا أداة التصميم، ثم توضيح المقاسات المطلوبة للمُطَوِّر. اِبْدَأْ بالاتفاق على الحجم الذي استخدمته لحساب REM في نموذجك، مثل 16 بكسل.
للتحويل من PX إلى REM، اِقْسِمْ المقاس بالبكسل على حجم خط html المُفْتَرَض في التصميم. مثلًا: 24 مَقْسُومَة على 16 تساوي 1.5، ولذلك تكون 24px مساوية لـ 1.5rem عندما يكون هذا هو أساس الحساب.
الجدول في الصورة مَبْنِيّ على 16 بكسل. إذا اِسْتَخْدَمَ فريقك حجمًا مختلفًا، يجب إعادة الحساب. ولا يعني اختيار 16 بكسل لشرح التصميم أننا نطلب تجاهل إعدادات المُسْتَخْدِم؛ نذكر هذا الرقم حتى يفهم الفريق كيف حَسَبْنَا القِيَم.
في نظام التصميم، أَعْطِ الأحجام أسماء تشرح استخدامها، مثل «نص أساسي» و«عنوان بطاقة» و«مسافة صغيرة». ثم سَجِّلْ المقاس والوحدة بجانب كل اسم. هذا يساعد المصممين والمُطَوِّرين على استخدام القِيَم نفسها في الشاشات المختلفة.
أَضِفْ أيضًا ملاحظة قصيرة عندما يحتاج العنصر إلى تَصَرُّف مُعَيَّن. مثلًا: «يمكن أن يَمْتَدَّ عنوان البطاقة إلى سطرين»، أو «تَكْبُرُ المسافة داخل الزِّرّ مع حجم نصه». هذه المعلومات لا يمكن فهمها دائمًا من صورة التصميم وحدها.
وإذا كنت تَسْتَخْدِمُ Zeplin، فيمكنه عرض القياسات وأحجام الخطوط بوحدة REM، بعد تحديد حجم الخط الذي سيعتمد عليه التحويل. ويمكن تفعيل التحويل للخطوط والمسافات بصورة منفصلة، كما يُوَضِّحُ توثيق Zeplin.
يمكنك أيضًا متابعة الفيديوهين الموجودين مع المقال: وحدات الأحجام للخطوط في تصميم الويب، وتنظيم وتسليم التصاميم عبر Zeplin. وقد تختلف واجهة الأداة الحالية عن الفيديو، لذلك اِرْجِعْ إلى توثيقها عند تطبيق خطوات الإعداد.
كيف تَتَأَكَّدُ أن المقاسات تعمل كما تريد؟
رَاجِعْ مع المُطَوِّر صفحة حقيقية تحتوي على عنوان وفقرة وَزِرّ. جَرِّبْ زيادة الحجم الافتراضي للخط، ثم أَعِدْهُ إلى وضعه المُعْتَاد وجَرِّبْ تكبير الصفحة إلى 200%. اِخْتَبِرْ أيضًا الشاشة الضيقة، وَاسْتَخْدِمْ عنوانًا طويلًا بدل الاكتفاء بكلمات قصيرة.
في كل تجربة، اِسْأَلْ: هل أستطيع قراءة النص كاملًا؟ هل الزِّرّ يَتَّسِعُ للكلمات؟ وهل ما زال ترتيب العناصر واضحًا؟ إذا وَجَدْتَ مشكلة، رَاجِعْ مقاس العنصر والمساحة المتاحة له، ولا تَفْتَرِضْ أن تغيير الوحدة وحده سَيَحُلُّهَا.
فهم هذه الوحدات يساعدك على شرح تصميمك، خصوصًا عندما تعمل على أزرار وبطاقات تَتَكَرَّرُ في الموقع. وهو جزء من تحويل الفكرة إلى واجهة قابلة للتنفيذ: تختار المقاسات، وَتُوَضِّحُ كيف تَتَغَيَّرُ، ثم تَتَأَكَّدُ من النتيجة داخل المُتَصَفِّح.
المصادر
تاريخ النشر
27 أغسطس 2026
آخر تعديل
6 أكتوبر 2026
