الاختلاف بين وحدات القياس PX و REM و EM في CSS

وحدة الـ px (بكسل)

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

مثال:

p{
  font-size: 16px;
}

وحدة الـ rem (الـ ريم)

وحدة الـ rem تعتمد على حجم الخط في العنصر الجذري، الذي عادةً ما يكون 16 بكسل افتراضيًا في معظم المتصفحات. يتم استخدامها لتعيين الأحجام بالنسبة إلى حجم الخط الأساسي، مما يجعل تصميم الواجهات أكثر مرونة.

مثال:

html{
    font-size: 16px;
}

p{
   font-size: 2rem; /* 16 * 2 = 32px */
}

div{
  height: 0.5rem; /* 16 / 2 = 8px */
}

استخدامات واحدة REM:

استخدامات وحدة rem في CSS تتضمن:

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

3. وحدة الـ em (الـ إم):

تعتمد وحدة الـ em على حجم الخط في العنصر نفسه. فإذا استخدمت لحجم الخط، فإنها تعين الحجم بالنسبة لحجم الخط في العنصر الأب. وإذا استخدمت لخصائص أخرى مثل العرض أو الارتفاع، فإنها تعين الحجم بالنسبة لحجم الخط الحالي في العنصر نفسه. وتُعتبر وحدة قياس نسبية.

مثال:

html {
    /* تعيين حجم الخط الأساسي للمستند بوحدة البكسل إلى 16 بكسل */
     font-size: 16px;
}
 p {
    /* تعيين حجم الخط بمقدار مضاعف 2 من حجم الخط للعنصر الأب
    / 2 em = 2 * 16px = 32 px */
     font-size: 2em;
}
 div {
    /* تعيين حجم الخط للعنصر 1.5
    em = 1.5 * 16px = 24 px */
     font-size: 1.5em;
     
    /* تعيين ارتفاع السطر للعنصر
     1.2 em = 1.2 * 24 = 28.8px */
     line-height: 1.2em;
     
    /* تعيين ارتفاع السطر للعنصر
     1.5 em = 1.5 * 24 = 36px */
     height: 1.5em;
}
 

استخدامات واحدة EM:

بالرغم من أن استخدام وحدات em عادة ما يكون لتعديل الأبعاد بالنسبة لحجم الخط نفسه، إلا أنه يمكن استخدامها لأغراض متنوعة أخرى أيضًا.

وإليك بعض الاستخدامات الشائعة لوحدات em:

1. أحجام الخطوط: تعيين أحجام الخطوط بالنسبة لحجم الخط للعنصر الأب.
2. المسافات: تعديل هوامش، وحواف، وارتفاع السطر بالنسبة لحجم الخط للعنصر.
3. التخطيطات: إنشاء تخطيطات متجاوبة حيث تتغير العناصر بنسب متناسقة استنادًا إلى حجم الخط.
4. الرموز: استخدام وحدات em لأحجام الرموز التي يمكن تحجيمها.
5. سهولة الوصول: توفير إمكانية للمستخدمين لتعديل أحجام الخطوط في المتصفح، حيث تحترم وحدات em هذه التغييرات.

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

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

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